hermes-chat-react 0.1.1 → 0.1.3

package/dist/react.cjs

@@ -30,20 +30,53 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react.ts
 var react_exports = {};
 __export(react_exports, {
+  Avatar: () => Avatar,
+  Chat: () => Chat,
+  ChatContext: () => ChatContext,
   ChatInput: () => ChatInput,
+  ChatProvider: () => ChatProvider,
+  ComponentContext: () => ComponentContext,
+  ComponentProvider: () => ComponentProvider,
+  DateSeparator: () => DateSeparator,
+  EmptyStateIndicator: () => EmptyStateIndicator,
   HermesClient: () => HermesClient,
+  LoadingErrorIndicator: () => LoadingErrorIndicator,
+  LoadingIndicator: () => LoadingIndicator,
   MediaMessage: () => MediaMessage,
+  Message: () => Message,
+  MessageActions: () => MessageActions,
+  MessageContext: () => MessageContext,
   MessageList: () => MessageList,
+  MessageProvider: () => MessageProvider,
+  MessageStatus: () => MessageStatus,
+  Modal: () => Modal,
   OnlineBadge: () => OnlineBadge,
   ReactionPicker: () => ReactionPicker,
+  Room: () => Room,
+  RoomActionContext: () => RoomActionContext,
+  RoomActionProvider: () => RoomActionProvider,
   RoomList: () => RoomList,
-  TypingIndicator: () => TypingIndicator2,
+  RoomStateContext: () => RoomStateContext,
+  RoomStateProvider: () => RoomStateProvider,
+  Search: () => Search,
+  Thread: () => Thread,
+  ThreadHeader: () => ThreadHeader,
+  TypingContext: () => TypingContext,
+  TypingIndicator: () => TypingIndicator,
+  TypingProvider: () => TypingProvider,
+  Window: () => Window,
+  useChatContext: () => useChatContext,
+  useComponentContext: () => useComponentContext,
+  useMessageContext: () => useMessageContext,
   useMessages: () => useMessages,
   usePresence: () => usePresence,
   useReactions: () => useReactions,
   useReadReceipts: () => useReadReceipts,
+  useRoomActionContext: () => useRoomActionContext,
+  useRoomStateContext: () => useRoomStateContext,
   useRooms: () => useRooms,
   useTyping: () => useTyping,
+  useTypingContext: () => useTypingContext,
   useUpload: () => useUpload
 });
 module.exports = __toCommonJS(react_exports);
@@ -124,10 +157,7 @@ var HermesClient = class extends EventEmitter {
         body: JSON.stringify({
           apiKey: cfg.apiKey,
           secret: cfg.secret,
-          userId: cfg.userId,
-          displayName: cfg.displayName ?? cfg.userId,
-          avatar: cfg.avatar,
-          email: cfg.email
+          userId: cfg.userId
         })
       });
       const data = await res.json();
@@ -278,17 +308,128 @@ var HermesClient = class extends EventEmitter {
   }
 };
 
-// src/react/hooks/useMessages.ts
+// src/react/context/ChatContext.tsx
 var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChatContext = (0, import_react.createContext)(
+  void 0
+);
+var ChatProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatContext.Provider, { value, children });
+var useChatContext = (componentName) => {
+  const contextValue = (0, import_react.useContext)(ChatContext);
+  if (!contextValue) {
+    console.warn(
+      `useChatContext was called outside of ChatProvider. Make sure this hook is called within a child of the <Chat> component.${componentName ? ` Errored in: ${componentName}` : ""}`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/react/context/RoomStateContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RoomStateContext = (0, import_react2.createContext)(void 0);
+var RoomStateProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RoomStateContext.Provider, { value, children });
+var useRoomStateContext = (componentName) => {
+  const contextValue = (0, import_react2.useContext)(RoomStateContext);
+  if (!contextValue) {
+    console.warn(
+      `useRoomStateContext was called outside of RoomStateProvider. Make sure this hook is called within a child of the <Room> component.${componentName ? ` Errored in: ${componentName}` : ""}`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/react/context/RoomActionContext.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RoomActionContext = (0, import_react3.createContext)(void 0);
+var RoomActionProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RoomActionContext.Provider, { value, children });
+var useRoomActionContext = (componentName) => {
+  const contextValue = (0, import_react3.useContext)(RoomActionContext);
+  if (!contextValue) {
+    console.warn(
+      `useRoomActionContext was called outside of RoomActionProvider. Make sure this hook is called within a child of the <Room> component.${componentName ? ` Errored in: ${componentName}` : ""}`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/react/context/MessageContext.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MessageContext = (0, import_react4.createContext)(
+  void 0
+);
+var MessageProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContext.Provider, { value, children });
+var useMessageContext = (componentName) => {
+  const contextValue = (0, import_react4.useContext)(MessageContext);
+  if (!contextValue) {
+    console.warn(
+      `useMessageContext was called outside of MessageProvider.${componentName ? ` Errored in: ${componentName}` : ""}`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/react/context/ComponentContext.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ComponentContext = (0, import_react5.createContext)({});
+var ComponentProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComponentContext.Provider, { value, children });
+var useComponentContext = (_componentName) => (0, import_react5.useContext)(ComponentContext);
+
+// src/react/context/TypingContext.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TypingContext = (0, import_react6.createContext)(
+  void 0
+);
+var TypingProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TypingContext.Provider, { value, children });
+var useTypingContext = (componentName) => {
+  const contextValue = (0, import_react6.useContext)(TypingContext);
+  if (!contextValue) {
+    console.warn(
+      `useTypingContext was called outside of TypingProvider.${componentName ? ` Errored in: ${componentName}` : ""}`
+    );
+    return {};
+  }
+  return contextValue;
+};
+
+// src/react/hooks/useMessages.ts
+var import_react7 = require("react");
 var useMessages = (client, roomId) => {
-  const [messages, setMessages] = (0, import_react.useState)([]);
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  const [loadingMore, setLoadingMore] = (0, import_react.useState)(false);
-  const [hasMore, setHasMore] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
-  const [typingUsers, setTypingUsers] = (0, import_react.useState)([]);
-  const oldestMessageId = (0, import_react.useRef)(void 0);
-  (0, import_react.useEffect)(() => {
+  const [messages, setMessages] = (0, import_react7.useState)([]);
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [loadingMore, setLoadingMore] = (0, import_react7.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [typingUsers, setTypingUsers] = (0, import_react7.useState)([]);
+  const oldestMessageId = (0, import_react7.useRef)(void 0);
+  (0, import_react7.useEffect)(() => {
     if (!roomId || !client.isConnected) return;
     setMessages([]);
     setHasMore(false);
@@ -301,7 +442,7 @@ var useMessages = (client, roomId) => {
       if (msgs.length > 0) oldestMessageId.current = msgs[0]._id;
     }).catch((err) => setError(err.message)).finally(() => setLoading(false));
   }, [roomId, client.isConnected]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!roomId) return;
     const onReceive = (msg) => {
       if (msg.roomId !== roomId) return;
@@ -331,7 +472,7 @@ var useMessages = (client, roomId) => {
       client.off("message:edited", onEdited);
     };
   }, [roomId, client]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const onReaction = ({ messageId, reactions }) => {
       setMessages(
         (prev) => prev.map((m) => m._id === messageId ? { ...m, reactions } : m)
@@ -342,7 +483,7 @@ var useMessages = (client, roomId) => {
       client.off("reaction:updated", onReaction);
     };
   }, [client]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!roomId) return;
     const onStarted = ({ userId, displayName, roomId: rid }) => {
       if (rid !== roomId) return;
@@ -363,7 +504,7 @@ var useMessages = (client, roomId) => {
       setTypingUsers([]);
     };
   }, [roomId, client]);
-  const loadMore = (0, import_react.useCallback)(async () => {
+  const loadMore = (0, import_react7.useCallback)(async () => {
     if (!roomId || loadingMore || !hasMore) return;
     setLoadingMore(true);
     try {
@@ -380,28 +521,28 @@ var useMessages = (client, roomId) => {
       setLoadingMore(false);
     }
   }, [roomId, loadingMore, hasMore, client]);
-  const sendMessage = (0, import_react.useCallback)(
+  const sendMessage = (0, import_react7.useCallback)(
     async (input) => {
       if (!roomId) throw new Error("No room selected");
       return client.sendMessage({ ...input, roomId });
     },
     [roomId, client]
   );
-  const editMessage = (0, import_react.useCallback)(
+  const editMessage = (0, import_react7.useCallback)(
     async (messageId, text) => {
       if (!roomId) throw new Error("No room selected");
       return client.editMessage(messageId, roomId, text);
     },
     [roomId, client]
   );
-  const deleteMessage = (0, import_react.useCallback)(
+  const deleteMessage = (0, import_react7.useCallback)(
     async (messageId) => {
       if (!roomId) throw new Error("No room selected");
       return client.deleteMessage(messageId, roomId);
     },
     [roomId, client]
   );
-  const addReaction = (0, import_react.useCallback)(
+  const addReaction = (0, import_react7.useCallback)(
     async (messageId, emoji) => {
       if (!roomId) throw new Error("No room selected");
       return client.addReaction(messageId, roomId, emoji);
@@ -424,13 +565,13 @@ var useMessages = (client, roomId) => {
 };
 
 // src/react/hooks/useRooms.ts
-var import_react2 = require("react");
+var import_react8 = require("react");
 var useRooms = (client) => {
-  const [rooms, setRooms] = (0, import_react2.useState)([]);
-  const [loading, setLoading] = (0, import_react2.useState)(true);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const fetchedRef = (0, import_react2.useRef)(false);
-  const fetchRooms = (0, import_react2.useCallback)(async () => {
+  const [rooms, setRooms] = (0, import_react8.useState)([]);
+  const [loading, setLoading] = (0, import_react8.useState)(true);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const fetchedRef = (0, import_react8.useRef)(false);
+  const fetchRooms = (0, import_react8.useCallback)(async () => {
     setLoading(true);
     setError(null);
     await new Promise((resolve, reject) => {
@@ -459,7 +600,7 @@ var useRooms = (client) => {
       setLoading(false);
     }
   }, [client]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     fetchRooms();
     const onConnected = () => {
       if (!fetchedRef.current) fetchRooms();
@@ -469,7 +610,7 @@ var useRooms = (client) => {
       client.off("connected", onConnected);
     };
   }, [fetchRooms, client]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const onCreated = (room) => {
       setRooms((prev) => {
         if (prev.find((r) => r._id === room._id)) return prev;
@@ -516,7 +657,7 @@ var useRooms = (client) => {
       client.off("message:receive", onMessage);
     };
   }, [client]);
-  const createDirect = (0, import_react2.useCallback)(
+  const createDirect = (0, import_react8.useCallback)(
     async (input) => {
       const room = await client.createDirectRoom(input);
       setRooms((prev) => {
@@ -527,7 +668,7 @@ var useRooms = (client) => {
     },
     [client]
   );
-  const createGroup = (0, import_react2.useCallback)(
+  const createGroup = (0, import_react8.useCallback)(
     async (input) => {
       const room = await client.createGroupRoom(input);
       setRooms((prev) => {
@@ -538,18 +679,18 @@ var useRooms = (client) => {
     },
     [client]
   );
-  const deleteRoom = (0, import_react2.useCallback)(
+  const deleteRoom = (0, import_react8.useCallback)(
     async (roomId) => {
       await client.deleteRoom(roomId);
       setRooms((prev) => prev.filter((r) => r._id !== roomId));
     },
     [client]
   );
-  const addMember = (0, import_react2.useCallback)(
+  const addMember = (0, import_react8.useCallback)(
     (roomId, userId) => client.addMember(roomId, userId),
     [client]
   );
-  const removeMember = (0, import_react2.useCallback)(
+  const removeMember = (0, import_react8.useCallback)(
     (roomId, userId) => client.removeMember(roomId, userId),
     [client]
   );
@@ -567,10 +708,10 @@ var useRooms = (client) => {
 };
 
 // src/react/hooks/usePresence.ts
-var import_react3 = require("react");
+var import_react9 = require("react");
 var usePresence = (client) => {
-  const [onlineMap, setOnlineMap] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
-  (0, import_react3.useEffect)(() => {
+  const [onlineMap, setOnlineMap] = (0, import_react9.useState)(/* @__PURE__ */ new Map());
+  (0, import_react9.useEffect)(() => {
     const onOnline = ({ userId }) => {
       setOnlineMap((prev) => new Map(prev).set(userId, true));
     };
@@ -584,7 +725,7 @@ var usePresence = (client) => {
       client.off("user:offline", onOffline);
     };
   }, [client]);
-  const isOnline = (0, import_react3.useCallback)(
+  const isOnline = (0, import_react9.useCallback)(
     (userId) => onlineMap.get(userId) ?? false,
     [onlineMap]
   );
@@ -593,17 +734,17 @@ var usePresence = (client) => {
 };
 
 // src/react/hooks/useTyping.ts
-var import_react4 = require("react");
+var import_react10 = require("react");
 var useTyping = (client, roomId) => {
-  const [typingUsers, setTypingUsers] = (0, import_react4.useState)(
+  const [typingUsers, setTypingUsers] = (0, import_react10.useState)(
     /* @__PURE__ */ new Map()
   );
-  const timeouts = (0, import_react4.useRef)(
+  const timeouts = (0, import_react10.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const typingRef = (0, import_react4.useRef)(false);
-  const stopTimeout = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const typingRef = (0, import_react10.useRef)(false);
+  const stopTimeout = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (!roomId) return;
     const onStart = (event) => {
       if (event.roomId !== roomId) return;
@@ -642,7 +783,7 @@ var useTyping = (client, roomId) => {
       timeouts.current.clear();
     };
   }, [roomId, client]);
-  const startTyping = (0, import_react4.useCallback)(() => {
+  const startTyping = (0, import_react10.useCallback)(() => {
     if (!roomId) return;
     if (!typingRef.current) {
       client.startTyping(roomId);
@@ -654,7 +795,7 @@ var useTyping = (client, roomId) => {
       typingRef.current = false;
     }, 3e3);
   }, [roomId, client]);
-  const stopTyping = (0, import_react4.useCallback)(() => {
+  const stopTyping = (0, import_react10.useCallback)(() => {
     if (!roomId) return;
     if (stopTimeout.current) clearTimeout(stopTimeout.current);
     if (typingRef.current) {
@@ -679,10 +820,10 @@ var useTyping = (client, roomId) => {
 };
 
 // src/react/hooks/useReadReceipts.ts
-var import_react5 = require("react");
+var import_react11 = require("react");
 var useReadReceipts = (client, roomId) => {
-  const [receipts, setReceipts] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
-  (0, import_react5.useEffect)(() => {
+  const [receipts, setReceipts] = (0, import_react11.useState)(/* @__PURE__ */ new Map());
+  (0, import_react11.useEffect)(() => {
     if (!roomId) return;
     const onReceipt = (event) => {
       if (event.roomId !== roomId) return;
@@ -697,14 +838,14 @@ var useReadReceipts = (client, roomId) => {
     client.on("receipt:updated", onReceipt);
     return () => client.off("receipt:updated", onReceipt);
   }, [roomId, client]);
-  const markSeen = (0, import_react5.useCallback)(
+  const markSeen = (0, import_react11.useCallback)(
     async (lastMessageId) => {
       if (!roomId) return;
       await client.markSeen(roomId, lastMessageId);
     },
     [roomId, client]
   );
-  const seenBy = (0, import_react5.useCallback)(
+  const seenBy = (0, import_react11.useCallback)(
     (messageId) => {
       return Array.from(receipts.get(messageId) ?? []);
     },
@@ -714,16 +855,16 @@ var useReadReceipts = (client, roomId) => {
 };
 
 // src/react/hooks/useReactions.ts
-var import_react6 = require("react");
+var import_react12 = require("react");
 var useReactions = (client, roomId) => {
-  const react = (0, import_react6.useCallback)(
+  const react = (0, import_react12.useCallback)(
     async (messageId, emoji) => {
       if (!roomId) throw new Error("No room selected");
       await client.addReaction(messageId, roomId, emoji);
     },
     [roomId, client]
   );
-  const hasReacted = (0, import_react6.useCallback)(
+  const hasReacted = (0, import_react12.useCallback)(
     (reactions, emoji) => {
       const userId = client.currentUser?.userId;
       if (!userId) return false;
@@ -731,25 +872,25 @@ var useReactions = (client, roomId) => {
     },
     [client]
   );
-  const getCount = (0, import_react6.useCallback)(
+  const getCount = (0, import_react12.useCallback)(
     (reactions, emoji) => {
       return reactions.find((r) => r.emoji === emoji)?.users.length ?? 0;
     },
     []
   );
-  const getEmojis = (0, import_react6.useCallback)((reactions) => {
+  const getEmojis = (0, import_react12.useCallback)((reactions) => {
     return reactions.filter((r) => r.users.length > 0).map((r) => r.emoji);
   }, []);
   return { react, hasReacted, getCount, getEmojis };
 };
 
 // src/react/hooks/useUpload.ts
-var import_react7 = require("react");
+var import_react13 = require("react");
 var useUpload = (client) => {
-  const [uploading, setUploading] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const [lastUpload, setLastUpload] = (0, import_react7.useState)(null);
-  const upload = (0, import_react7.useCallback)(
+  const [uploading, setUploading] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [lastUpload, setLastUpload] = (0, import_react13.useState)(null);
+  const upload = (0, import_react13.useCallback)(
     async (file) => {
       setUploading(true);
       setError(null);
@@ -766,7 +907,7 @@ var useUpload = (client) => {
     },
     [client]
   );
-  const sendFile = (0, import_react7.useCallback)(
+  const sendFile = (0, import_react13.useCallback)(
     async (roomId, file, replyTo) => {
       setUploading(true);
       setError(null);
@@ -793,7 +934,7 @@ var useUpload = (client) => {
     },
     [client]
   );
-  const validate = (0, import_react7.useCallback)((file, maxMb = 50) => {
+  const validate = (0, import_react13.useCallback)((file, maxMb = 50) => {
     if (file.size > maxMb * 1024 * 1024) {
       return `File too large. Max size is ${maxMb}MB.`;
     }
@@ -820,151 +961,616 @@ var useUpload = (client) => {
   return { upload, sendFile, validate, uploading, error, lastUpload };
 };
 
-// src/react/components/MessageList.tsx
-var import_react8 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var formatTime = (iso) => new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-var formatFileSize = (bytes) => {
-  if (!bytes) return "";
-  if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${bytes} B`;
+// src/react/components/Chat/Chat.tsx
+var import_react14 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Chat = ({
+  client,
+  theme = "light",
+  customClasses,
+  initialNavOpen = false,
+  children
+}) => {
+  const [activeRoom, setActiveRoom] = (0, import_react14.useState)(void 0);
+  const [navOpen, setNavOpen] = (0, import_react14.useState)(initialNavOpen);
+  const [currentUser, setCurrentUser] = (0, import_react14.useState)(
+    client.currentUser
+  );
+  (0, import_react14.useEffect)(() => {
+    if (client.currentUser) {
+      setCurrentUser(client.currentUser);
+    }
+    const onConnected = () => setCurrentUser(client.currentUser);
+    client.on("connected", onConnected);
+    return () => {
+      client.off("connected", onConnected);
+    };
+  }, [client]);
+  const openMobileNav = (0, import_react14.useCallback)(() => setNavOpen(true), []);
+  const closeMobileNav = (0, import_react14.useCallback)(() => setNavOpen(false), []);
+  const handleSetActiveRoom = (0, import_react14.useCallback)(
+    (room) => {
+      setActiveRoom(room);
+      setNavOpen(false);
+    },
+    []
+  );
+  const chatContextValue = (0, import_react14.useMemo)(
+    () => ({
+      client,
+      currentUser,
+      theme,
+      activeRoom,
+      setActiveRoom: handleSetActiveRoom,
+      openMobileNav,
+      closeMobileNav,
+      navOpen,
+      customClasses
+    }),
+    [
+      client,
+      currentUser,
+      theme,
+      activeRoom,
+      handleSetActiveRoom,
+      openMobileNav,
+      closeMobileNav,
+      navOpen,
+      customClasses
+    ]
+  );
+  const containerClass = customClasses?.chat || `hermes-chat hermes-chat--${theme}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatProvider, { value: chatContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: containerClass, children }) });
 };
-var REACTION_EMOJIS = [
-  "\u{1FAE0}",
-  "\u{1F979}",
-  "\u{1FAE1}",
-  "\u{1F90C}",
-  "\u{1FAF6}",
-  "\u{1F480}",
-  "\u{1F525}",
-  "\u2728",
-  "\u{1FAE3}",
-  "\u{1F62E}\u200D\u{1F4A8}",
-  "\u{1FA84}",
-  "\u{1F972}",
-  "\u{1F485}",
-  "\u{1FAE6}",
-  "\u{1F92F}",
-  "\u{1F31A}",
-  "\u{1F441}\uFE0F",
-  "\u{1FAC0}",
-  "\u{1F98B}",
-  "\u{1FA90}"
-];
-var EmojiPicker = ({ onPick, onClose, isOwn }) => {
-  const ref = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
+
+// src/react/components/Room/Room.tsx
+var import_react15 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Room = ({
+  roomId,
+  children,
+  // Component overrides forwarded to ComponentContext
+  Avatar: Avatar2,
+  Message: MessageOverride,
+  MessageStatus: MessageStatus2,
+  MessageActions: MessageActions2,
+  DateSeparator: DateSeparator2,
+  EmptyStateIndicator: EmptyStateIndicator2,
+  LoadingIndicator: LoadingIndicator2,
+  LoadingErrorIndicator: LoadingErrorIndicator2,
+  ReactionPicker: ReactionPicker2,
+  TypingIndicator: TypingIndicator2,
+  MediaMessage: MediaMessage2,
+  ThreadHeader: ThreadHeader2,
+  Modal: Modal2,
+  ChatInput: ChatInput2,
+  RoomListItem,
+  Search: Search2,
+  OnlineBadge: OnlineBadge2
+}) => {
+  const { client, customClasses } = useChatContext("Room");
+  const [messages, setMessages] = (0, import_react15.useState)([]);
+  const [loading, setLoading] = (0, import_react15.useState)(true);
+  const [loadingMore, setLoadingMore] = (0, import_react15.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const oldestMessageId = (0, import_react15.useRef)(void 0);
+  const [thread, setThread] = (0, import_react15.useState)(null);
+  const [threadMessages, setThreadMessages] = (0, import_react15.useState)([]);
+  const [threadHasMore, setThreadHasMore] = (0, import_react15.useState)(false);
+  const [threadLoadingMore, setThreadLoadingMore] = (0, import_react15.useState)(false);
+  const [typingUsers, setTypingUsers] = (0, import_react15.useState)(
+    /* @__PURE__ */ new Map()
+  );
+  const typingTimeouts = (0, import_react15.useRef)(
+    /* @__PURE__ */ new Map()
+  );
+  const isTypingRef = (0, import_react15.useRef)(false);
+  const stopTypingTimeout = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
+    if (!roomId || !client?.isConnected) return;
+    setMessages([]);
+    setHasMore(false);
+    setThread(null);
+    setThreadMessages([]);
+    oldestMessageId.current = void 0;
+    setLoading(true);
+    setError(null);
+    client.getHistory(roomId).then(({ messages: msgs, hasMore: more }) => {
+      setMessages(msgs);
+      setHasMore(more);
+      if (msgs.length > 0) oldestMessageId.current = msgs[0]._id;
+    }).catch((err) => setError(err.message)).finally(() => setLoading(false));
+  }, [roomId, client?.isConnected]);
+  (0, import_react15.useEffect)(() => {
+    if (!roomId || !client) return;
+    const onReceive = (msg) => {
+      if (msg.roomId !== roomId) return;
+      if (msg.threadParentId && thread && msg.threadParentId === thread._id) {
+        setThreadMessages(
+          (prev) => prev.find((m) => m._id === msg._id) ? prev : [...prev, msg]
+        );
+        setMessages(
+          (prev) => prev.map(
+            (m) => m._id === msg.threadParentId ? { ...m, replyCount: (m.replyCount || 0) + 1 } : m
+          )
+        );
+        return;
+      }
+      setMessages(
+        (prev) => prev.find((m) => m._id === msg._id) ? prev : [...prev, msg]
+      );
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    const onDeleted = ({ messageId }) => {
+      setMessages(
+        (prev) => prev.map(
+          (m) => m._id === messageId ? { ...m, isDeleted: true, text: void 0 } : m
+        )
+      );
+      setThreadMessages(
+        (prev) => prev.map(
+          (m) => m._id === messageId ? { ...m, isDeleted: true, text: void 0 } : m
+        )
+      );
+    };
+    const onEdited = (msg) => {
+      setMessages((prev) => prev.map((m) => m._id === msg._id ? msg : m));
+      setThreadMessages(
+        (prev) => prev.map((m) => m._id === msg._id ? msg : m)
+      );
+    };
+    const onReaction = ({ messageId, reactions }) => {
+      setMessages(
+        (prev) => prev.map((m) => m._id === messageId ? { ...m, reactions } : m)
+      );
+      setThreadMessages(
+        (prev) => prev.map((m) => m._id === messageId ? { ...m, reactions } : m)
+      );
+    };
+    client.on("message:receive", onReceive);
+    client.on("message:deleted", onDeleted);
+    client.on("message:edited", onEdited);
+    client.on("reaction:updated", onReaction);
+    return () => {
+      client.off("message:receive", onReceive);
+      client.off("message:deleted", onDeleted);
+      client.off("message:edited", onEdited);
+      client.off("reaction:updated", onReaction);
+    };
+  }, [roomId, client, thread]);
+  (0, import_react15.useEffect)(() => {
+    if (!roomId || !client) return;
+    const onStart = (event) => {
+      if (event.roomId !== roomId) return;
+      if (event.userId === client.currentUser?.userId) return;
+      setTypingUsers(
+        (prev) => new Map(prev).set(event.userId, event.displayName)
+      );
+      const existing = typingTimeouts.current.get(event.userId);
+      if (existing) clearTimeout(existing);
+      const t = setTimeout(() => {
+        setTypingUsers((prev) => {
+          const next = new Map(prev);
+          next.delete(event.userId);
+          return next;
+        });
+      }, 4e3);
+      typingTimeouts.current.set(event.userId, t);
+    };
+    const onStop = (event) => {
+      if (event.roomId !== roomId) return;
+      setTypingUsers((prev) => {
+        const next = new Map(prev);
+        next.delete(event.userId);
+        return next;
+      });
+      const existing = typingTimeouts.current.get(event.userId);
+      if (existing) clearTimeout(existing);
+    };
+    client.on("typing:started", onStart);
+    client.on("typing:stopped", onStop);
+    return () => {
+      client.off("typing:started", onStart);
+      client.off("typing:stopped", onStop);
+      typingTimeouts.current.forEach(clearTimeout);
+      typingTimeouts.current.clear();
+      setTypingUsers(/* @__PURE__ */ new Map());
+    };
+  }, [roomId, client]);
+  const sendMessage = (0, import_react15.useCallback)(
+    async (input) => {
+      if (!roomId) throw new Error("No room selected");
+      return client.sendMessage({ ...input, roomId });
+    },
+    [roomId, client]
+  );
+  const editMessage = (0, import_react15.useCallback)(
+    async (messageId, text) => {
+      if (!roomId) throw new Error("No room selected");
+      return client.editMessage(messageId, roomId, text);
+    },
+    [roomId, client]
+  );
+  const deleteMessage = (0, import_react15.useCallback)(
+    async (messageId) => {
+      if (!roomId) throw new Error("No room selected");
+      return client.deleteMessage(messageId, roomId);
+    },
+    [roomId, client]
+  );
+  const addReaction = (0, import_react15.useCallback)(
+    async (messageId, emoji) => {
+      if (!roomId) throw new Error("No room selected");
+      return client.addReaction(messageId, roomId, emoji);
+    },
+    [roomId, client]
+  );
+  const loadMore = (0, import_react15.useCallback)(async () => {
+    if (!roomId || loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    try {
+      const { messages: older, hasMore: more } = await client.getHistory(
+        roomId,
+        oldestMessageId.current
+      );
+      setMessages((prev) => [...older, ...prev]);
+      setHasMore(more);
+      if (older.length > 0) oldestMessageId.current = older[0]._id;
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [roomId, loadingMore, hasMore, client]);
+  const markRead = (0, import_react15.useCallback)(
+    async (lastMessageId) => {
+      if (!roomId) return;
+      await client.markSeen(roomId, lastMessageId);
+    },
+    [roomId, client]
+  );
+  const openThread = (0, import_react15.useCallback)((message) => {
+    setThread(message);
+    setThreadMessages([]);
+    setThreadHasMore(false);
+  }, []);
+  const closeThread = (0, import_react15.useCallback)(() => {
+    setThread(null);
+    setThreadMessages([]);
+  }, []);
+  const loadMoreThread = (0, import_react15.useCallback)(async () => {
+  }, []);
+  const startTyping = (0, import_react15.useCallback)(() => {
+    if (!roomId) return;
+    if (!isTypingRef.current) {
+      client.startTyping(roomId);
+      isTypingRef.current = true;
+    }
+    if (stopTypingTimeout.current) clearTimeout(stopTypingTimeout.current);
+    stopTypingTimeout.current = setTimeout(() => {
+      client.stopTyping(roomId);
+      isTypingRef.current = false;
+    }, 3e3);
+  }, [roomId, client]);
+  const stopTyping = (0, import_react15.useCallback)(() => {
+    if (!roomId) return;
+    if (stopTypingTimeout.current) clearTimeout(stopTypingTimeout.current);
+    if (isTypingRef.current) {
+      client.stopTyping(roomId);
+      isTypingRef.current = false;
+    }
+  }, [roomId, client]);
+  const typingText = (0, import_react15.useMemo)(() => {
+    const names = Array.from(typingUsers.values());
+    if (names.length === 0) return null;
+    if (names.length === 1) return `${names[0]} is typing...`;
+    if (names.length === 2) return `${names[0]} and ${names[1]} are typing...`;
+    return `${names[0]} and ${names.length - 1} others are typing...`;
+  }, [typingUsers]);
+  const roomStateValue = (0, import_react15.useMemo)(
+    () => ({
+      room: { _id: roomId },
+      messages,
+      loading,
+      loadingMore,
+      hasMore,
+      error,
+      members: [],
+      thread,
+      threadMessages,
+      threadHasMore,
+      threadLoadingMore,
+      pinnedMessages: messages.filter((m) => m.pinnedAt)
+    }),
+    [messages, loading, loadingMore, hasMore, error, thread, threadMessages, threadHasMore, threadLoadingMore, roomId]
+  );
+  const roomActionValue = (0, import_react15.useMemo)(
+    () => ({
+      sendMessage,
+      editMessage,
+      deleteMessage,
+      addReaction,
+      loadMore,
+      markRead,
+      openThread,
+      closeThread,
+      loadMoreThread
+    }),
+    [sendMessage, editMessage, deleteMessage, addReaction, loadMore, markRead, openThread, closeThread, loadMoreThread]
+  );
+  const typingValue = (0, import_react15.useMemo)(
+    () => ({
+      typingUsers,
+      typingText,
+      isAnyoneTyping: typingUsers.size > 0,
+      startTyping,
+      stopTyping
+    }),
+    [typingUsers, typingText, startTyping, stopTyping]
+  );
+  const componentOverrides = (0, import_react15.useMemo)(
+    () => ({
+      Avatar: Avatar2,
+      Message: MessageOverride,
+      MessageStatus: MessageStatus2,
+      MessageActions: MessageActions2,
+      DateSeparator: DateSeparator2,
+      EmptyStateIndicator: EmptyStateIndicator2,
+      LoadingIndicator: LoadingIndicator2,
+      LoadingErrorIndicator: LoadingErrorIndicator2,
+      ReactionPicker: ReactionPicker2,
+      TypingIndicator: TypingIndicator2,
+      MediaMessage: MediaMessage2,
+      ThreadHeader: ThreadHeader2,
+      Modal: Modal2,
+      ChatInput: ChatInput2,
+      RoomListItem,
+      Search: Search2,
+      OnlineBadge: OnlineBadge2
+    }),
+    [Avatar2, MessageOverride, MessageStatus2, MessageActions2, DateSeparator2, EmptyStateIndicator2, LoadingIndicator2, LoadingErrorIndicator2, ReactionPicker2, TypingIndicator2, MediaMessage2, ThreadHeader2, Modal2, ChatInput2, RoomListItem, Search2, OnlineBadge2]
+  );
+  const containerClass = customClasses?.room || "hermes-room";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RoomStateProvider, { value: roomStateValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RoomActionProvider, { value: roomActionValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TypingProvider, { value: typingValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ComponentProvider, { value: componentOverrides, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: containerClass, children }) }) }) }) });
+};
+
+// src/react/components/Window/Window.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Window = ({
+  className = "",
+  children
+}) => {
+  const { customClasses } = useChatContext("Window");
+  const containerClass = customClasses?.window || `hermes-window ${className}`.trim();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
-      ref,
+      className: containerClass,
       style: {
-        position: "absolute",
-        bottom: "calc(100% + 8px)",
-        [isOwn ? "right" : "left"]: 0,
-        zIndex: 100,
-        background: "#1a1a2e",
-        border: "1px solid rgba(255,255,255,0.1)",
-        borderRadius: 14,
-        padding: "8px 10px",
-        boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
-        display: "grid",
-        gridTemplateColumns: "repeat(5, 1fr)",
-        gap: 4,
-        animation: "hermes-pop 0.15s ease"
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        flex: 1,
+        minWidth: 0,
+        overflow: "hidden"
       },
-      children: REACTION_EMOJIS.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          onClick: () => {
-            onPick(emoji);
-            onClose();
-          },
-          style: {
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            fontSize: 20,
-            padding: "4px",
-            borderRadius: 8,
-            lineHeight: 1,
-            transition: "transform 0.1s, background 0.1s"
-          },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.transform = "scale(1.3)";
-            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.transform = "scale(1)";
-            e.currentTarget.style.background = "none";
-          },
-          children: emoji
-        },
-        emoji
-      ))
+      children
     }
   );
 };
-var TypingIndicator = ({ typingUsers }) => {
-  if (!typingUsers.length) return null;
-  const text = typingUsers.length === 1 ? `${typingUsers[0].displayName} is typing` : typingUsers.length === 2 ? `${typingUsers[0].displayName} and ${typingUsers[1].displayName} are typing` : `${typingUsers[0].displayName} and ${typingUsers.length - 1} others are typing`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+
+// src/react/components/MessageList.tsx
+var import_react17 = __toESM(require("react"), 1);
+
+// src/react/components/Message/Message.tsx
+var import_react16 = require("react");
+
+// src/react/components/Avatar/Avatar.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var getInitials = (name) => {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+};
+var Avatar = ({
+  image,
+  name,
+  size = 36,
+  shape = "circle",
+  className = "",
+  online
+}) => {
+  const borderRadius = shape === "circle" ? "50%" : shape === "rounded" ? "8px" : "0";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
+      className: `hermes-avatar ${className}`,
       style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "6px 16px 2px",
-        minHeight: 28
+        position: "relative",
+        width: size,
+        height: size,
+        flexShrink: 0
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        image ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "img",
+          {
+            src: image,
+            alt: name || "avatar",
+            style: {
+              width: size,
+              height: size,
+              borderRadius,
+              objectFit: "cover",
+              display: "block"
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: {
+              width: size,
+              height: size,
+              borderRadius,
+              background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
               display: "flex",
               alignItems: "center",
-              gap: 3,
-              background: "#f0f0f0",
-              borderRadius: 12,
-              padding: "6px 10px"
+              justifyContent: "center",
+              color: "#fff",
+              fontWeight: 700,
+              fontSize: size * 0.38,
+              userSelect: "none"
             },
-            children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "span",
-              {
-                style: {
-                  width: 6,
-                  height: 6,
-                  borderRadius: "50%",
-                  background: "#999",
-                  display: "block",
-                  animation: `hermes-bounce 1.2s ease-in-out ${i * 0.18}s infinite`
-                }
-              },
-              i
-            ))
+            children: getInitials(name)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, color: "#999" }, children: text })
+        online !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              bottom: 0,
+              right: 0,
+              width: size * 0.3,
+              height: size * 0.3,
+              borderRadius: "50%",
+              background: online ? "#22c55e" : "#9ca3af",
+              border: "2px solid #fff"
+            }
+          }
+        )
       ]
     }
   );
 };
-var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, renderAvatar }) => {
-  const [hovered, setHovered] = (0, import_react8.useState)(false);
-  const [pickerOpen, setPickerOpen] = (0, import_react8.useState)(false);
+
+// src/react/components/Message/MessageStatus.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MessageStatus = ({
+  status,
+  seenCount = 0,
+  isMyMessage = true,
+  className = ""
+}) => {
+  if (!isMyMessage) return null;
+  const color = status === "seen" ? "#0084ff" : "rgba(128,128,128,0.6)";
+  const checks = status === "sent" ? "\u2713" : "\u2713\u2713";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "span",
+    {
+      className: `hermes-message-status ${className}`,
+      title: status === "seen" ? `Seen by ${seenCount} ${seenCount === 1 ? "person" : "people"}` : status === "delivered" ? "Delivered" : "Sent",
+      style: {
+        fontSize: 11,
+        color,
+        marginLeft: 4,
+        userSelect: "none"
+      },
+      children: checks
+    }
+  );
+};
+
+// src/react/components/Message/MessageActions.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ActionBtn = ({ onClick, title, children }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "button",
+  {
+    onClick,
+    title,
+    style: {
+      background: "#fff",
+      border: "1px solid rgba(0,0,0,0.1)",
+      borderRadius: 8,
+      cursor: "pointer",
+      fontSize: 14,
+      padding: "3px 6px",
+      lineHeight: 1,
+      boxShadow: "0 1px 4px rgba(0,0,0,0.1)",
+      transition: "transform 0.1s"
+    },
+    onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.15)",
+    onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
+    children
+  }
+);
+var MessageActions = ({
+  isOwn,
+  isText,
+  hasThread = false,
+  replyCount = 0,
+  onReact,
+  onReply,
+  onThread,
+  onEdit,
+  onDelete,
+  onPin,
+  className = ""
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  "div",
+  {
+    className: `hermes-message-actions ${className}`,
+    style: {
+      display: "flex",
+      flexDirection: isOwn ? "row-reverse" : "row",
+      gap: 2
+    },
+    children: [
+      onReact && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionBtn, { onClick: onReact, title: "React", children: "\u{1F60A}" }),
+      onReply && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionBtn, { onClick: onReply, title: "Reply", children: "\u21A9" }),
+      onThread && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionBtn, { onClick: onThread, title: `Thread${replyCount > 0 ? ` (${replyCount})` : ""}`, children: "\u{1F9F5}" }),
+      isOwn && isText && onEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionBtn, { onClick: onEdit, title: "Edit", children: "\u270F\uFE0F" }),
+      onPin && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionBtn, { onClick: onPin, title: "Pin", children: "\u{1F4CC}" }),
+      isOwn && onDelete && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionBtn, { onClick: onDelete, title: "Delete", children: "\u{1F5D1}" })
+    ]
+  }
+);
+
+// src/react/components/Message/Message.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var REACTION_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F525}", "\u{1F389}", "\u{1F44F}"];
+var formatTime = (iso) => new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+var formatFileSize = (bytes) => {
+  if (!bytes) return "";
+  if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${bytes} B`;
+};
+var Message = ({
+  message,
+  isOwn,
+  onEdit,
+  onDelete,
+  onReact,
+  onReply,
+  onOpenThread,
+  onPin,
+  renderAvatar,
+  senderName,
+  senderImage,
+  groupStyle = "single",
+  className = "",
+  showAvatar = true
+}) => {
+  const [hovered, setHovered] = (0, import_react16.useState)(false);
+  const [pickerOpen, setPickerOpen] = (0, import_react16.useState)(false);
+  const pickerRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    if (!pickerOpen) return;
+    const handler = (e) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target)) {
+        setPickerOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [pickerOpen]);
   if (message.isDeleted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
+        className: `hermes-message hermes-message--deleted ${className}`,
         style: {
           opacity: 0.5,
           fontStyle: "italic",
@@ -975,40 +1581,24 @@ var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, rend
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const showAvatarSlot = showAvatar && !isOwn && (groupStyle === "bottom" || groupStyle === "single");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
+      className: `hermes-message ${isOwn ? "hermes-message--own" : "hermes-message--other"} ${className}`,
       onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => {
-        setHovered(false);
-      },
+      onMouseLeave: () => setHovered(false),
       style: {
         display: "flex",
         flexDirection: isOwn ? "row-reverse" : "row",
         alignItems: "flex-end",
         gap: 8,
-        marginBottom: 4,
+        marginBottom: groupStyle === "bottom" || groupStyle === "single" ? 8 : 2,
         position: "relative"
       },
       children: [
-        !isOwn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flexShrink: 0 }, children: renderAvatar ? renderAvatar(message.senderId) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            style: {
-              width: 32,
-              height: 32,
-              borderRadius: "50%",
-              background: "#e0e0e0",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 12,
-              fontWeight: 600
-            },
-            children: message.senderId.slice(-2).toUpperCase()
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        !isOwn && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flexShrink: 0, width: 32 }, children: showAvatarSlot ? renderAvatar ? renderAvatar(message.senderId) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { image: senderImage, name: senderName || message.senderId, size: 32 }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             style: {
@@ -1018,13 +1608,10 @@ var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, rend
               alignItems: isOwn ? "flex-end" : "flex-start"
             },
             children: [
-              (onEdit || onDelete || onReact || onReply) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              (onEdit || onDelete || onReact || onReply || onOpenThread) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "div",
                 {
                   style: {
-                    display: "flex",
-                    flexDirection: isOwn ? "row-reverse" : "row",
-                    gap: 2,
                     marginBottom: 4,
                     opacity: hovered ? 1 : 0,
                     pointerEvents: hovered ? "auto" : "none",
@@ -1032,55 +1619,86 @@ var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, rend
                     position: "relative"
                   },
                   children: [
-                    onReact && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        ActionBtn,
-                        {
-                          onClick: () => setPickerOpen((p) => !p),
-                          title: "React",
-                          children: "\u{1FAE0}"
-                        }
-                      ),
-                      pickerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        EmojiPicker,
-                        {
-                          isOwn,
-                          onPick: (emoji) => onReact(message._id, emoji),
-                          onClose: () => setPickerOpen(false)
-                        }
-                      )
-                    ] }),
-                    onReply && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionBtn, { onClick: () => onReply(message), title: "Reply", children: "\u21A9" }),
-                    isOwn && onEdit && message.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      ActionBtn,
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      MessageActions,
                       {
-                        onClick: () => {
+                        isOwn,
+                        isText: message.type === "text",
+                        hasThread: !!message.replyCount && message.replyCount > 0,
+                        replyCount: message.replyCount,
+                        onReact: onReact ? () => setPickerOpen((p) => !p) : void 0,
+                        onReply: onReply ? () => onReply(message) : void 0,
+                        onThread: onOpenThread ? () => onOpenThread(message) : void 0,
+                        onEdit: onEdit ? () => {
                           const text = window.prompt("Edit message:", message.text);
                           if (text) onEdit(message._id, text);
-                        },
-                        title: "Edit",
-                        children: "\u270F\uFE0F"
+                        } : void 0,
+                        onDelete: onDelete ? () => onDelete(message._id) : void 0,
+                        onPin: onPin ? () => onPin(message) : void 0
                       }
                     ),
-                    isOwn && onDelete && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionBtn, { onClick: () => onDelete(message._id), title: "Delete", children: "\u{1F5D1}" })
+                    pickerOpen && onReact && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      "div",
+                      {
+                        ref: pickerRef,
+                        style: {
+                          position: "absolute",
+                          bottom: "calc(100% + 4px)",
+                          [isOwn ? "right" : "left"]: 0,
+                          zIndex: 100,
+                          background: "#1a1a2e",
+                          border: "1px solid rgba(255,255,255,0.1)",
+                          borderRadius: 14,
+                          padding: "8px 10px",
+                          boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
+                          display: "flex",
+                          gap: 4,
+                          animation: "hermes-pop 0.15s ease"
+                        },
+                        children: REACTION_EMOJIS.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "button",
+                          {
+                            onClick: () => {
+                              onReact(message._id, emoji);
+                              setPickerOpen(false);
+                            },
+                            style: {
+                              background: "none",
+                              border: "none",
+                              cursor: "pointer",
+                              fontSize: 20,
+                              padding: "4px",
+                              borderRadius: 8,
+                              lineHeight: 1,
+                              transition: "transform 0.1s"
+                            },
+                            onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.3)",
+                            onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
+                            children: emoji
+                          },
+                          emoji
+                        ))
+                      }
+                    )
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              !isOwn && (groupStyle === "top" || groupStyle === "single") && senderName && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 11, fontWeight: 600, opacity: 0.6, marginBottom: 2, marginLeft: 4 }, children: senderName }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "div",
                 {
                   style: {
                     padding: "8px 12px",
-                    borderRadius: isOwn ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
+                    borderRadius: isOwn ? groupStyle === "top" || groupStyle === "single" ? "16px 16px 4px 16px" : "16px 4px 4px 16px" : groupStyle === "top" || groupStyle === "single" ? "16px 16px 16px 4px" : "4px 16px 16px 4px",
                     background: isOwn ? "#0084ff" : "#f0f0f0",
                     color: isOwn ? "#fff" : "#000"
                   },
                   children: [
-                    message.replyTo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    message.replyTo && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       "div",
                       {
                         style: {
-                          borderLeft: "3px solid rgba(255,255,255,0.4)",
+                          borderLeft: `3px solid ${isOwn ? "rgba(255,255,255,0.4)" : "rgba(0,132,255,0.4)"}`,
                           paddingLeft: 8,
                           marginBottom: 6,
                           fontSize: 12,
@@ -1089,27 +1707,24 @@ var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, rend
                         children: "Replying to a message"
                       }
                     ),
-                    message.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { margin: 0, wordBreak: "break-word" }, children: [
+                    message.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { style: { margin: 0, wordBreak: "break-word" }, children: [
                       message.text,
-                      message.editedAt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 10, opacity: 0.6, marginLeft: 6 }, children: "(edited)" })
+                      message.editedAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 10, opacity: 0.6, marginLeft: 6 }, children: "(edited)" })
                     ] }),
-                    message.type === "link" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                      message.text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "0 0 4px" }, children: message.text }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    message.type === "link" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+                      message.text && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { style: { margin: "0 0 4px" }, children: message.text }),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "a",
                         {
                           href: message.url,
                           target: "_blank",
                           rel: "noopener noreferrer",
-                          style: {
-                            color: isOwn ? "#cce4ff" : "#0084ff",
-                            wordBreak: "break-all"
-                          },
+                          style: { color: isOwn ? "#cce4ff" : "#0084ff", wordBreak: "break-all" },
                           children: message.url
                         }
                       )
                     ] }),
-                    message.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    message.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       "img",
                       {
                         src: message.url,
@@ -1117,16 +1732,17 @@ var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, rend
                         style: { maxWidth: "100%", borderRadius: 8, display: "block" }
                       }
                     ),
-                    message.type === "video" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    message.type === "video" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       "video",
                       {
                         src: message.url,
+                        poster: message.thumbnail,
                         controls: true,
                         style: { maxWidth: "100%", borderRadius: 8 }
                       }
                     ),
-                    message.type === "audio" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("audio", { src: message.url, controls: true, style: { width: "100%" } }),
-                    message.type === "document" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    message.type === "audio" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("audio", { src: message.url, controls: true, style: { width: "100%" } }),
+                    message.type === "document" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                       "a",
                       {
                         href: message.url,
@@ -1140,67 +1756,90 @@ var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, rend
                           textDecoration: "none"
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 24 }, children: "\u{1F4C4}" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, fontSize: 13 }, children: message.fileName }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, opacity: 0.7 }, children: formatFileSize(message.fileSize) })
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 24 }, children: "\u{1F4C4}" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontWeight: 600, fontSize: 13 }, children: message.fileName }),
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 11, opacity: 0.7 }, children: formatFileSize(message.fileSize) })
                           ] })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                       "div",
                       {
                         style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "flex-end",
+                          gap: 4,
                           fontSize: 10,
                           opacity: 0.6,
-                          textAlign: "right",
                           marginTop: 4
                         },
-                        children: formatTime(message.createdAt)
+                        children: [
+                          formatTime(message.createdAt),
+                          message.pinnedAt && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { title: "Pinned", children: "\u{1F4CC}" }),
+                          isOwn && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            MessageStatus,
+                            {
+                              status: message.deliveryStatus,
+                              seenCount: message.seenBy?.length || 0,
+                              isMyMessage: isOwn
+                            }
+                          )
+                        ]
                       }
                     )
                   ]
                 }
               ),
-              message.reactions?.filter((r) => r.users.length > 0).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
+              message.replyCount && message.replyCount > 0 && onOpenThread && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "button",
                 {
-                  style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 4 },
-                  children: message.reactions.filter((r) => r.users.length > 0).map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    "span",
-                    {
-                      onClick: () => onReact?.(message._id, r.emoji),
-                      style: {
-                        background: "#f0f0f0",
-                        border: "1px solid rgba(0,0,0,0.08)",
-                        borderRadius: 20,
-                        padding: "2px 8px",
-                        fontSize: 13,
-                        cursor: "pointer",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 4,
-                        transition: "transform 0.1s",
-                        userSelect: "none"
-                      },
-                      onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
-                      onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
-                      children: [
-                        r.emoji,
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "span",
-                          {
-                            style: { fontSize: 11, fontWeight: 600, color: "#555" },
-                            children: r.users.length
-                          }
-                        )
-                      ]
-                    },
-                    r.emoji
-                  ))
+                  onClick: () => onOpenThread(message),
+                  style: {
+                    background: "none",
+                    border: "none",
+                    color: "#0084ff",
+                    cursor: "pointer",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    padding: "2px 4px",
+                    marginTop: 2
+                  },
+                  children: [
+                    message.replyCount,
+                    " ",
+                    message.replyCount === 1 ? "reply" : "replies"
+                  ]
                 }
-              )
+              ),
+              message.reactions?.filter((r) => r.users.length > 0).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 4 }, children: message.reactions.filter((r) => r.users.length > 0).map((r) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "span",
+                {
+                  onClick: () => onReact?.(message._id, r.emoji),
+                  style: {
+                    background: "#f0f0f0",
+                    border: "1px solid rgba(0,0,0,0.08)",
+                    borderRadius: 20,
+                    padding: "2px 8px",
+                    fontSize: 13,
+                    cursor: onReact ? "pointer" : "default",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    transition: "transform 0.1s",
+                    userSelect: "none"
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.1)",
+                  onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
+                  children: [
+                    r.emoji,
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 11, fontWeight: 600, color: "#555" }, children: r.users.length })
+                  ]
+                },
+                r.emoji
+              )) })
             ]
           }
         )
@@ -1208,52 +1847,277 @@ var DefaultMessage = ({ message, isOwn, onEdit, onDelete, onReact, onReply, rend
     }
   );
 };
-var ActionBtn = ({ onClick, title, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "button",
+
+// src/react/components/DateSeparator/DateSeparator.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var defaultFormat = (date) => {
+  const now = /* @__PURE__ */ new Date();
+  const isToday = date.getDate() === now.getDate() && date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear();
+  const yesterday = new Date(now);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const isYesterday = date.getDate() === yesterday.getDate() && date.getMonth() === yesterday.getMonth() && date.getFullYear() === yesterday.getFullYear();
+  if (isToday) return "Today";
+  if (isYesterday) return "Yesterday";
+  return date.toLocaleDateString(void 0, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+};
+var DateSeparator = ({
+  date,
+  formatDate = defaultFormat,
+  className = ""
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  "div",
   {
-    onClick,
-    title,
+    className: `hermes-date-separator ${className}`,
     style: {
-      background: "#fff",
-      border: "1px solid rgba(0,0,0,0.1)",
-      borderRadius: 8,
-      cursor: "pointer",
-      fontSize: 14,
-      padding: "3px 6px",
-      lineHeight: 1,
-      boxShadow: "0 1px 4px rgba(0,0,0,0.1)",
-      transition: "transform 0.1s"
+      display: "flex",
+      alignItems: "center",
+      gap: 12,
+      padding: "16px 0"
     },
-    onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.15)",
-    onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)",
-    children
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          style: { flex: 1, height: 1, background: "rgba(128,128,128,0.2)" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "span",
+        {
+          style: {
+            fontSize: 12,
+            fontWeight: 600,
+            color: "rgba(128,128,128,0.7)",
+            whiteSpace: "nowrap",
+            userSelect: "none"
+          },
+          children: formatDate(date)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          style: { flex: 1, height: 1, background: "rgba(128,128,128,0.2)" }
+        }
+      )
+    ]
   }
 );
-var MessageList = ({
-  messages,
-  currentUser,
-  loading = false,
-  loadingMore = false,
-  hasMore = false,
-  onLoadMore,
-  onEdit,
-  onDelete,
-  onReact,
-  onReply,
-  renderMessage,
-  renderAvatar,
-  className = "",
-  autoScroll = true,
-  typingUsers = []
+
+// src/react/components/EmptyStateIndicator/EmptyStateIndicator.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var DEFAULT_TEXTS = {
+  message: "No messages yet. Say hello! \u{1F44B}",
+  room: "No conversations yet.",
+  thread: "No replies yet.",
+  search: "No results found."
+};
+var EmptyStateIndicator = ({
+  listType = "message",
+  text,
+  className = ""
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  "div",
+  {
+    className: `hermes-empty-state ${className}`,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      padding: 32,
+      textAlign: "center",
+      opacity: 0.5,
+      flex: 1
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontSize: 36 }, children: listType === "message" ? "\u{1F4AC}" : listType === "room" ? "\u{1F4ED}" : listType === "thread" ? "\u{1F9F5}" : "\u{1F50D}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontSize: 14 }, children: text || DEFAULT_TEXTS[listType] })
+    ]
+  }
+);
+
+// src/react/components/Loading/LoadingIndicator.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var LoadingIndicator = ({
+  size = 32,
+  color = "#0084ff",
+  text,
+  className = ""
+}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  "div",
+  {
+    className: `hermes-loading ${className}`,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      padding: 16
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "div",
+        {
+          style: {
+            width: size,
+            height: size,
+            border: `3px solid rgba(128,128,128,0.15)`,
+            borderTopColor: color,
+            borderRadius: "50%",
+            animation: "hermes-spin 0.8s linear infinite"
+          }
+        }
+      ),
+      text && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 13, opacity: 0.6 }, children: text }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: `
+      @keyframes hermes-spin {
+        to { transform: rotate(360deg); }
+      }
+    ` })
+    ]
+  }
+);
+var LoadingErrorIndicator = ({
+  error,
+  onRetry,
+  className = ""
 }) => {
-  const bottomRef = (0, import_react8.useRef)(null);
-  const containerRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  if (!error) return null;
+  const message = typeof error === "string" ? error : error.message;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      className: `hermes-loading-error ${className}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 24,
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 28 }, children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { fontSize: 14, opacity: 0.7 }, children: message }),
+        onRetry && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            onClick: onRetry,
+            style: {
+              marginTop: 4,
+              padding: "6px 16px",
+              border: "1px solid rgba(128,128,128,0.3)",
+              borderRadius: 8,
+              background: "none",
+              cursor: "pointer",
+              fontSize: 13,
+              fontWeight: 600
+            },
+            children: "Retry"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/components/TypingIndicator.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var TypingIndicator = ({
+  typingText,
+  className = ""
+}) => {
+  if (!typingText) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: `hermes-typing-indicator ${className}`,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "4px 16px",
+        minHeight: 24
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { display: "flex", gap: 3 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "span",
+          {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: "#aaa",
+              display: "block",
+              animation: `hermes-bounce 1.2s ease-in-out ${i * 0.2}s infinite`
+            }
+          },
+          i
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { fontSize: 12, opacity: 0.6 }, children: typingText }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { children: `
+        @keyframes hermes-bounce {
+          0%, 80%, 100% { transform: translateY(0); }
+          40% { transform: translateY(-4px); }
+        }
+      ` })
+      ]
+    }
+  );
+};
+
+// src/react/components/MessageList.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var isSameDay = (d1, d2) => {
+  const a = new Date(d1);
+  const b = new Date(d2);
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+};
+var MessageList = (props) => {
+  const chatCtx = useChatContext("MessageList");
+  const roomStateCtx = useRoomStateContext("MessageList");
+  const roomActionCtx = useRoomActionContext("MessageList");
+  const typingCtx = useTypingContext("MessageList");
+  const componentCtx = useComponentContext("MessageList");
+  const messages = props.messages ?? roomStateCtx.messages ?? [];
+  const currentUser = props.currentUser ?? chatCtx.currentUser;
+  const loading = props.loading ?? roomStateCtx.loading ?? false;
+  const loadingMore = props.loadingMore ?? roomStateCtx.loadingMore ?? false;
+  const hasMore = props.hasMore ?? roomStateCtx.hasMore ?? false;
+  const onLoadMore = props.onLoadMore ?? roomActionCtx.loadMore;
+  const onEdit = props.onEdit ?? (roomActionCtx.editMessage ? (id, text) => roomActionCtx.editMessage(id, text) : void 0);
+  const onDelete = props.onDelete ?? (roomActionCtx.deleteMessage ? (id) => roomActionCtx.deleteMessage(id) : void 0);
+  const onReact = props.onReact ?? (roomActionCtx.addReaction ? (id, emoji) => roomActionCtx.addReaction(id, emoji) : void 0);
+  const onReply = props.onReply;
+  const onOpenThread = props.onOpenThread ?? (roomActionCtx.openThread ? (msg) => roomActionCtx.openThread(msg) : void 0);
+  const autoScroll = props.autoScroll ?? true;
+  const disableDateSeparator = props.disableDateSeparator ?? false;
+  const className = props.className ?? "";
+  const renderMessage = props.renderMessage;
+  const renderAvatar = props.renderAvatar;
+  const typingText = props.typingText ?? typingCtx.typingText ?? null;
+  const MessageComponent = componentCtx.Message || Message;
+  const DateSepComponent = componentCtx.DateSeparator || DateSeparator;
+  const EmptyComponent = componentCtx.EmptyStateIndicator || EmptyStateIndicator;
+  const LoadingComponent = componentCtx.LoadingIndicator || LoadingIndicator;
+  const TypingComponent = componentCtx.TypingIndicator || TypingIndicator;
+  const bottomRef = (0, import_react17.useRef)(null);
+  const containerRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (autoScroll && bottomRef.current) {
       bottomRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, autoScroll]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const container = containerRef.current;
     if (!container || !onLoadMore) return;
     const onScroll = () => {
@@ -1263,21 +2127,33 @@ var MessageList = ({
     return () => container.removeEventListener("scroll", onScroll);
   }, [hasMore, loadingMore, onLoadMore]);
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         style: {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          height: "100%"
+          height: "100%",
+          flex: 1
         },
-        children: "Loading messages..."
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LoadingComponent, { text: "Loading messages..." })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+  const getGroupStyle = (index) => {
+    const msg = messages[index];
+    const prev = index > 0 ? messages[index - 1] : null;
+    const next = index < messages.length - 1 ? messages[index + 1] : null;
+    const sameSenderPrev = prev && prev.senderId === msg.senderId && !prev.isDeleted && isSameDay(prev.createdAt, msg.createdAt);
+    const sameSenderNext = next && next.senderId === msg.senderId && !next.isDeleted && isSameDay(next.createdAt, msg.createdAt);
+    if (sameSenderPrev && sameSenderNext) return "middle";
+    if (sameSenderPrev) return "bottom";
+    if (sameSenderNext) return "top";
+    return "single";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { children: `
         @keyframes hermes-bounce {
           0%, 80%, 100% { transform: translateY(0); }
           40%            { transform: translateY(-5px); }
@@ -1287,7 +2163,7 @@ var MessageList = ({
           to   { opacity: 1; transform: scale(1); }
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -1296,11 +2172,11 @@ var MessageList = ({
           overflowY: "auto",
           display: "flex",
           flexDirection: "column",
-          height: "100%",
+          flex: 1,
           padding: "16px"
         },
         children: [
-          hasMore && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { textAlign: "center", marginBottom: 12 }, children: loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, opacity: 0.5 }, children: "Loading older messages..." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { textAlign: "center", marginBottom: 12 }, children: loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LoadingComponent, { size: 20, text: "Loading older messages..." }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
               onClick: onLoadMore,
@@ -1315,35 +2191,32 @@ var MessageList = ({
               children: "Load older messages"
             }
           ) }),
-          messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              style: {
-                textAlign: "center",
-                opacity: 0.4,
-                margin: "auto",
-                fontSize: 14
-              },
-              children: "No messages yet. Say hello! \u{1F44B}"
-            }
-          ),
-          messages.map((message) => {
-            const isOwn = message.senderId === currentUser.userId;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 8 }, children: renderMessage ? renderMessage(message, isOwn) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              DefaultMessage,
-              {
-                message,
-                isOwn,
-                onEdit,
-                onDelete,
-                onReact,
-                onReply,
-                renderAvatar
-              }
-            ) }, message._id);
+          messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EmptyComponent, { listType: "message" }),
+          messages.map((message, index) => {
+            const isOwn = message.senderId === currentUser?.userId;
+            const groupStyle = getGroupStyle(index);
+            const showDateSep = !disableDateSeparator && (index === 0 || !isSameDay(messages[index - 1].createdAt, message.createdAt));
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react17.default.Fragment, { children: [
+              showDateSep && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DateSepComponent, { date: new Date(message.createdAt) }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginBottom: groupStyle === "bottom" || groupStyle === "single" ? 8 : 2 }, children: renderMessage ? renderMessage(message, isOwn) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                MessageComponent,
+                {
+                  message,
+                  isOwn,
+                  onEdit,
+                  onDelete,
+                  onReact,
+                  onReply,
+                  onOpenThread,
+                  renderAvatar,
+                  groupStyle,
+                  showAvatar: true
+                }
+              ) })
+            ] }, message._id);
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypingIndicator, { typingUsers }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: bottomRef })
+          typingText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TypingComponent, { typingText }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: bottomRef })
         ]
       }
     )
@@ -1351,28 +2224,34 @@ var MessageList = ({
 };
 
 // src/react/components/ChatInput.tsx
-var import_react9 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChatInput = ({
-  onSendText,
-  onSendFile,
-  onTypingStart,
-  onTypingStop,
-  replyingTo,
-  onCancelReply,
-  disabled = false,
-  placeholder = "Type a message...",
-  maxLength = 4e3,
-  className = "",
-  inputClassName = "",
-  renderAttachIcon,
-  renderSendIcon
-}) => {
-  const [text, setText] = (0, import_react9.useState)("");
-  const [sending, setSending] = (0, import_react9.useState)(false);
-  const fileRef = (0, import_react9.useRef)(null);
-  const textareaRef = (0, import_react9.useRef)(null);
-  const resizeTextarea = (0, import_react9.useCallback)(() => {
+var import_react18 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ChatInput = (props) => {
+  const roomActionCtx = useRoomActionContext("ChatInput");
+  const typingCtx = useTypingContext("ChatInput");
+  const chatCtx = useChatContext("ChatInput");
+  const onSendText = props.onSendText ?? (roomActionCtx.sendMessage ? async (text2) => {
+    await roomActionCtx.sendMessage({ type: "text", text: text2 });
+  } : void 0);
+  const onSendFile = props.onSendFile;
+  const onTypingStart = props.onTypingStart ?? typingCtx.startTyping;
+  const onTypingStop = props.onTypingStop ?? typingCtx.stopTyping;
+  const {
+    replyingTo,
+    onCancelReply,
+    disabled = false,
+    placeholder = "Type a message...",
+    maxLength = 4e3,
+    className = "",
+    inputClassName = "",
+    renderAttachIcon,
+    renderSendIcon
+  } = props;
+  const [text, setText] = (0, import_react18.useState)("");
+  const [sending, setSending] = (0, import_react18.useState)(false);
+  const fileRef = (0, import_react18.useRef)(null);
+  const textareaRef = (0, import_react18.useRef)(null);
+  const resizeTextarea = (0, import_react18.useCallback)(() => {
     const el = textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
@@ -1385,7 +2264,7 @@ var ChatInput = ({
   };
   const handleSend = async () => {
     const trimmed = text.trim();
-    if (!trimmed || sending || disabled) return;
+    if (!trimmed || sending || disabled || !onSendText) return;
     setSending(true);
     try {
       await onSendText(trimmed);
@@ -1408,7 +2287,7 @@ var ChatInput = ({
     await onSendFile(file);
     if (fileRef.current) fileRef.current.value = "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: `hermes-chat-input ${className}`,
@@ -1419,7 +2298,7 @@ var ChatInput = ({
         borderTop: "1px solid #e0e0e0"
       },
       children: [
-        replyingTo && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        replyingTo && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
             className: "hermes-chat-input__reply",
@@ -1435,11 +2314,11 @@ var ChatInput = ({
               fontSize: 12
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { overflow: "hidden" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontWeight: 600, marginRight: 4 }, children: "Replying to:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { opacity: 0.7 }, children: replyingTo.type === "text" ? replyingTo.text?.slice(0, 60) : `[${replyingTo.type}]` })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { overflow: "hidden" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { fontWeight: 600, marginRight: 4 }, children: "Replying to:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { opacity: 0.7 }, children: replyingTo.type === "text" ? replyingTo.text?.slice(0, 60) : `[${replyingTo.type}]` })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "button",
                 {
                   onClick: onCancelReply,
@@ -1456,14 +2335,14 @@ var ChatInput = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
             className: "hermes-chat-input__row",
             style: { display: "flex", alignItems: "flex-end", gap: 8 },
             children: [
-              onSendFile && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              onSendFile && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     onClick: () => fileRef.current?.click(),
@@ -1477,23 +2356,10 @@ var ChatInput = ({
                       flexShrink: 0,
                       opacity: disabled ? 0.4 : 1
                     },
-                    children: renderAttachIcon ? renderAttachIcon() : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      "svg",
-                      {
-                        width: "20",
-                        height: "20",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" })
-                      }
-                    )
+                    children: renderAttachIcon ? renderAttachIcon() : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "input",
                   {
                     ref: fileRef,
@@ -1504,7 +2370,7 @@ var ChatInput = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "textarea",
                 {
                   ref: textareaRef,
@@ -1531,7 +2397,7 @@ var ChatInput = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "button",
                 {
                   onClick: handleSend,
@@ -1545,35 +2411,24 @@ var ChatInput = ({
                     flexShrink: 0,
                     opacity: !text.trim() || sending || disabled ? 0.4 : 1
                   },
-                  children: renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
+                  children: renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
                 }
               )
             ]
           }
         ),
-        text.length > maxLength * 0.8 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            style: {
-              fontSize: 10,
-              textAlign: "right",
-              opacity: 0.5,
-              marginTop: 2
-            },
-            children: [
-              text.length,
-              "/",
-              maxLength
-            ]
-          }
-        )
+        text.length > maxLength * 0.8 && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { fontSize: 10, textAlign: "right", opacity: 0.5, marginTop: 2 }, children: [
+          text.length,
+          "/",
+          maxLength
+        ] })
       ]
     }
   );
 };
 
 // src/react/components/RoomList.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var formatLastActivity = (iso) => {
   const date = new Date(iso);
   const now = /* @__PURE__ */ new Date();
@@ -1604,7 +2459,7 @@ var getLastMessagePreview = (room) => {
   if (msg.type === "link") return `\u{1F517} ${msg.url}`;
   return "";
 };
-var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassName }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassName }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
   "div",
   {
     className: `hermes-room-item ${isActive ? "hermes-room-item--active" : ""} ${itemClassName ?? ""}`,
@@ -1618,7 +2473,7 @@ var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassN
       borderLeft: isActive ? "3px solid #0084ff" : "3px solid transparent"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flexShrink: 0 }, children: renderAvatar ? renderAvatar(room) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flexShrink: 0 }, children: renderAvatar ? renderAvatar(room) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           style: {
@@ -1635,8 +2490,8 @@ var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassN
           children: room.type === "group" ? "G" : "D"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, overflow: "hidden" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, overflow: "hidden" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             style: {
@@ -1645,7 +2500,7 @@ var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassN
               alignItems: "baseline"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   style: {
@@ -1658,7 +2513,7 @@ var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassN
                   children: getRoomName(room, currentUserId)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   style: { fontSize: 11, opacity: 0.5, flexShrink: 0, marginLeft: 4 },
@@ -1668,7 +2523,7 @@ var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassN
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             style: {
@@ -1678,7 +2533,7 @@ var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassN
               marginTop: 2
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   style: {
@@ -1691,7 +2546,7 @@ var DefaultRoomItem = ({ room, isActive, currentUserId, renderAvatar, itemClassN
                   children: getLastMessagePreview(room)
                 }
               ),
-              room.unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              room.unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   style: {
@@ -1728,7 +2583,7 @@ var RoomList = ({
   className = "",
   itemClassName = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: `hermes-room-list ${className}`,
@@ -1739,7 +2594,7 @@ var RoomList = ({
         overflowY: "auto"
       },
       children: [
-        (onCreateDirect || onCreateGroup) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        (onCreateDirect || onCreateGroup) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             style: {
@@ -1749,7 +2604,7 @@ var RoomList = ({
               borderBottom: "1px solid #e0e0e0"
             },
             children: [
-              onCreateDirect && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              onCreateDirect && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   onClick: onCreateDirect,
@@ -1767,7 +2622,7 @@ var RoomList = ({
                   children: "+ Direct"
                 }
               ),
-              onCreateGroup && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              onCreateGroup && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "button",
                 {
                   onClick: onCreateGroup,
@@ -1787,8 +2642,8 @@ var RoomList = ({
             ]
           }
         ),
-        loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "12px 16px", opacity: 0.5, fontSize: 13 }, children: "Loading rooms..." }),
-        !loading && rooms.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        loading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { padding: "12px 16px", opacity: 0.5, fontSize: 13 }, children: "Loading rooms..." }),
+        !loading && rooms.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "div",
           {
             style: {
@@ -1802,7 +2657,7 @@ var RoomList = ({
         ),
         !loading && rooms.map((room) => {
           const isActive = room._id === activeRoomId;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { onClick: () => onSelectRoom(room), children: renderRoomItem ? renderRoomItem(room, isActive) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { onClick: () => onSelectRoom(room), children: renderRoomItem ? renderRoomItem(room, isActive) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             DefaultRoomItem,
             {
               room,
@@ -1818,58 +2673,13 @@ var RoomList = ({
   );
 };
 
-// src/react/components/TypingIndicator.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TypingIndicator2 = ({
-  typingText,
-  className = ""
-}) => {
-  if (!typingText) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      className: `hermes-typing-indicator ${className}`,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "4px 16px",
-        minHeight: 24
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: 3 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "span",
-          {
-            style: {
-              width: 6,
-              height: 6,
-              borderRadius: "50%",
-              background: "#aaa",
-              display: "block",
-              animation: `hermes-bounce 1.2s ease-in-out ${i * 0.2}s infinite`
-            }
-          },
-          i
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 12, opacity: 0.6 }, children: typingText }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
-        @keyframes hermes-bounce {
-          0%, 80%, 100% { transform: translateY(0); }
-          40% { transform: translateY(-4px); }
-        }
-      ` })
-      ]
-    }
-  );
-};
-
 // src/react/components/OnlineBadge.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var OnlineBadge = ({
   isOnline,
   size = 10,
   className = ""
-}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "span",
   {
     className: `hermes-online-badge ${isOnline ? "hermes-online-badge--online" : "hermes-online-badge--offline"} ${className}`,
@@ -1887,9 +2697,9 @@ var OnlineBadge = ({
 );
 
 // src/react/components/ReactionPicker.tsx
-var import_react10 = require("react");
+var import_react19 = require("react");
 var import_emoji_picker_react = __toESM(require("emoji-picker-react"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var DEFAULT_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F525}", "\u{1F389}", "\u{1F44F}"];
 var ReactionPicker = ({
   onSelect,
@@ -1899,8 +2709,8 @@ var ReactionPicker = ({
   className = "",
   align = "left"
 }) => {
-  const [showPicker, setShowPicker] = (0, import_react10.useState)(false);
-  const containerRef = (0, import_react10.useRef)(null);
+  const [showPicker, setShowPicker] = (0, import_react19.useState)(false);
+  const containerRef = (0, import_react19.useRef)(null);
   const hasReacted = (emoji) => {
     if (!currentUserId) return false;
     return currentReactions.find((r) => r.emoji === emoji)?.users.includes(currentUserId) ?? false;
@@ -1909,7 +2719,7 @@ var ReactionPicker = ({
     onSelect(emojiData.emoji);
     setShowPicker(false);
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const handleOutsideClick = (e) => {
       if (!containerRef.current) return;
       const target = e.target;
@@ -1922,14 +2732,14 @@ var ReactionPicker = ({
     }
     return () => window.removeEventListener("click", handleOutsideClick);
   }, [showPicker]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", display: "inline-block" },
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             style: {
@@ -1942,7 +2752,7 @@ var ReactionPicker = ({
               border: "1px solid rgba(255,255,255,0.08)"
             },
             children: [
-              emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: () => onSelect(emoji),
@@ -1962,7 +2772,7 @@ var ReactionPicker = ({
                 },
                 emoji
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: (e) => {
@@ -1983,7 +2793,7 @@ var ReactionPicker = ({
             ]
           }
         ),
-        showPicker && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        showPicker && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             onMouseDown: (e) => e.stopPropagation(),
@@ -1995,7 +2805,7 @@ var ReactionPicker = ({
               zIndex: 50,
               animation: "hermes-pop 0.15s ease"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               import_emoji_picker_react.default,
               {
                 theme: import_emoji_picker_react.Theme.DARK,
@@ -2008,7 +2818,7 @@ var ReactionPicker = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: `
         @keyframes hermes-pop {
           from {
             opacity: 0;
@@ -2026,7 +2836,7 @@ var ReactionPicker = ({
 };
 
 // src/react/components/MediaMessage.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var formatFileSize2 = (bytes) => {
   if (!bytes) return "";
   if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
@@ -2039,13 +2849,13 @@ var MediaMessage = ({
   maxWidth = 300
 }) => {
   if (!message.url) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: `hermes-media-message hermes-media-message--${message.type} ${className}`,
       style: { maxWidth },
       children: [
-        message.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        message.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "img",
           {
             src: message.url,
@@ -2059,7 +2869,7 @@ var MediaMessage = ({
             onClick: () => window.open(message.url, "_blank")
           }
         ),
-        message.type === "video" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        message.type === "video" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "video",
           {
             src: message.url,
@@ -2068,17 +2878,17 @@ var MediaMessage = ({
             style: { width: "100%", borderRadius: 10 }
           }
         ),
-        message.type === "audio" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        message.type === "audio" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             style: { display: "flex", alignItems: "center", gap: 8, padding: 8 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 20 }, children: "\u{1F3B5}" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("audio", { src: message.url, controls: true, style: { flex: 1, height: 36 } })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 20 }, children: "\u{1F3B5}" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("audio", { src: message.url, controls: true, style: { flex: 1, height: 36 } })
             ]
           }
         ),
-        message.type === "document" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        message.type === "document" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "a",
           {
             href: message.url,
@@ -2095,9 +2905,9 @@ var MediaMessage = ({
               color: "inherit"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 28, flexShrink: 0 }, children: "\u{1F4C4}" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { overflow: "hidden" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: 28, flexShrink: 0 }, children: "\u{1F4C4}" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { overflow: "hidden" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "div",
                   {
                     style: {
@@ -2110,7 +2920,7 @@ var MediaMessage = ({
                     children: message.fileName ?? "Document"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { fontSize: 11, opacity: 0.6 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { fontSize: 11, opacity: 0.6 }, children: [
                   formatFileSize2(message.fileSize),
                   " \xB7 Click to download"
                 ] })
@@ -2118,7 +2928,7 @@ var MediaMessage = ({
             ]
           }
         ),
-        message.type === "link" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        message.type === "link" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "a",
           {
             href: message.url,
@@ -2146,22 +2956,436 @@ var MediaMessage = ({
     }
   );
 };
+
+// src/react/components/Thread/ThreadHeader.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ThreadHeader = ({
+  thread,
+  onClose,
+  className = ""
+}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  "div",
+  {
+    className: `hermes-thread-header ${className}`,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "12px 16px",
+      borderBottom: "1px solid rgba(128,128,128,0.15)"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, overflow: "hidden" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { fontWeight: 700, fontSize: 15, marginBottom: 2 }, children: "Thread" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: 12,
+              opacity: 0.6,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: thread.type === "text" ? thread.text?.slice(0, 80) : `[${thread.type}]`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            fontSize: 18,
+            padding: 4,
+            opacity: 0.6,
+            lineHeight: 1
+          },
+          children: "\u2715"
+        }
+      )
+    ]
+  }
+);
+
+// src/react/components/Thread/Thread.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Thread = ({
+  className = "",
+  autoFocus = true
+}) => {
+  const { currentUser, customClasses } = useChatContext("Thread");
+  const { thread, threadMessages, threadHasMore, threadLoadingMore } = useRoomStateContext("Thread");
+  const { closeThread, addReaction, deleteMessage, editMessage } = useRoomActionContext("Thread");
+  const {
+    ThreadHeader: CustomThreadHeader,
+    Message: CustomMessage
+  } = useComponentContext("Thread");
+  if (!thread) return null;
+  const ThreadHeaderComponent = CustomThreadHeader || ThreadHeader;
+  const MessageComponent = CustomMessage || Message;
+  const threadClass = customClasses?.thread || `hermes-thread ${className}`.trim();
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      className: threadClass,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        borderLeft: "1px solid rgba(128,128,128,0.15)",
+        minWidth: 320,
+        maxWidth: 420
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ThreadHeaderComponent, { thread, onClose: closeThread }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: "1px solid rgba(128,128,128,0.1)",
+              background: "rgba(128,128,128,0.03)"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              MessageComponent,
+              {
+                message: thread,
+                isOwn: thread.senderId === currentUser?.userId,
+                onReact: (id, emoji) => addReaction(id, emoji),
+                showAvatar: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: 16,
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: threadMessages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(EmptyStateIndicator, { listType: "thread" }) : threadMessages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              MessageComponent,
+              {
+                message: msg,
+                isOwn: msg.senderId === currentUser?.userId,
+                onEdit: (id, text) => editMessage(id, text),
+                onDelete: (id) => deleteMessage(id),
+                onReact: (id, emoji) => addReaction(id, emoji),
+                showAvatar: true
+              }
+            ) }, msg._id))
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/components/Modal/Modal.tsx
+var import_react20 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Modal = ({
+  open,
+  onClose,
+  className = "",
+  children
+}) => {
+  const handleKeyDown = (0, import_react20.useCallback)(
+    (e) => {
+      if (e.key === "Escape") onClose();
+    },
+    [onClose]
+  );
+  (0, import_react20.useEffect)(() => {
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [open, handleKeyDown]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      className: `hermes-modal-overlay ${className}`,
+      onClick: onClose,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.6)",
+        backdropFilter: "blur(4px)",
+        animation: "hermes-fade-in 0.15s ease"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          "div",
+          {
+            className: "hermes-modal-content",
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              maxWidth: "90vw",
+              maxHeight: "90vh",
+              overflow: "auto",
+              borderRadius: 12,
+              background: "#fff",
+              boxShadow: "0 16px 64px rgba(0,0,0,0.3)",
+              animation: "hermes-pop 0.2s ease"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    position: "absolute",
+                    top: 16,
+                    right: 16,
+                    background: "rgba(0,0,0,0.5)",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: "50%",
+                    width: 32,
+                    height: 32,
+                    cursor: "pointer",
+                    fontSize: 16,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 1
+                  },
+                  children: "\u2715"
+                }
+              ),
+              children
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: `
+        @keyframes hermes-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes hermes-pop {
+          from { opacity: 0; transform: scale(0.9); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      ` })
+      ]
+    }
+  );
+};
+
+// src/react/components/Search/Search.tsx
+var import_react21 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Search = ({
+  messages = [],
+  onSelectResult,
+  placeholder = "Search messages...",
+  className = ""
+}) => {
+  const [query, setQuery] = (0, import_react21.useState)("");
+  const [focused, setFocused] = (0, import_react21.useState)(false);
+  const results = (0, import_react21.useMemo)(() => {
+    if (!query.trim()) return [];
+    const lower = query.toLowerCase();
+    return messages.filter(
+      (m) => !m.isDeleted && m.type === "text" && m.text?.toLowerCase().includes(lower)
+    ).slice(0, 20);
+  }, [query, messages]);
+  const handleSelect = (0, import_react21.useCallback)(
+    (msg) => {
+      onSelectResult?.(msg);
+      setQuery("");
+      setFocused(false);
+    },
+    [onSelectResult]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      className: `hermes-search ${className}`,
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "6px 12px",
+              border: "1px solid rgba(128,128,128,0.2)",
+              borderRadius: 10,
+              background: focused ? "#fff" : "rgba(128,128,128,0.05)",
+              transition: "background 0.15s, border-color 0.15s",
+              borderColor: focused ? "#0084ff" : "rgba(128,128,128,0.2)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { fontSize: 14, opacity: 0.5 }, children: "\u{1F50D}" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "input",
+                {
+                  type: "text",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  onFocus: () => setFocused(true),
+                  onBlur: () => setTimeout(() => setFocused(false), 200),
+                  placeholder,
+                  style: {
+                    flex: 1,
+                    border: "none",
+                    outline: "none",
+                    fontSize: 13,
+                    background: "transparent"
+                  }
+                }
+              ),
+              query && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "button",
+                {
+                  onClick: () => setQuery(""),
+                  style: {
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: 14,
+                    opacity: 0.5,
+                    lineHeight: 1
+                  },
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ),
+        focused && query.trim() && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 50,
+              background: "#fff",
+              border: "1px solid rgba(128,128,128,0.15)",
+              borderRadius: 10,
+              boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
+              maxHeight: 300,
+              overflowY: "auto"
+            },
+            children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "div",
+              {
+                style: {
+                  padding: 16,
+                  textAlign: "center",
+                  fontSize: 13,
+                  opacity: 0.5
+                },
+                children: "No results found"
+              }
+            ) : results.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              "div",
+              {
+                onClick: () => handleSelect(msg),
+                style: {
+                  padding: "8px 12px",
+                  cursor: "pointer",
+                  borderBottom: "1px solid rgba(128,128,128,0.08)",
+                  transition: "background 0.1s"
+                },
+                onMouseEnter: (e) => e.currentTarget.style.background = "rgba(0,132,255,0.05)",
+                onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    "div",
+                    {
+                      style: {
+                        fontSize: 13,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: msg.text
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 2 }, children: new Date(msg.createdAt).toLocaleString() })
+                ]
+              },
+              msg._id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Avatar,
+  Chat,
+  ChatContext,
   ChatInput,
+  ChatProvider,
+  ComponentContext,
+  ComponentProvider,
+  DateSeparator,
+  EmptyStateIndicator,
   HermesClient,
+  LoadingErrorIndicator,
+  LoadingIndicator,
   MediaMessage,
+  Message,
+  MessageActions,
+  MessageContext,
   MessageList,
+  MessageProvider,
+  MessageStatus,
+  Modal,
   OnlineBadge,
   ReactionPicker,
+  Room,
+  RoomActionContext,
+  RoomActionProvider,
   RoomList,
+  RoomStateContext,
+  RoomStateProvider,
+  Search,
+  Thread,
+  ThreadHeader,
+  TypingContext,
   TypingIndicator,
+  TypingProvider,
+  Window,
+  useChatContext,
+  useComponentContext,
+  useMessageContext,
   useMessages,
   usePresence,
   useReactions,
   useReadReceipts,
+  useRoomActionContext,
+  useRoomStateContext,
   useRooms,
   useTyping,
+  useTypingContext,
   useUpload
 });
 //# sourceMappingURL=react.cjs.map