@anonfly/react 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,21 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/codewithasterixh/anonflyclient/main/public/logo.png" width="96" />
+</p>
+
 # @anonfly/react
 
-React UI components and hooks for the Anonfly SDK.
+[![Version](https://img.shields.io/npm/v/@anonfly/react?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@anonfly/react)
+[![Downloads](https://img.shields.io/npm/dm/@anonfly/react?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@anonfly/react)
+
+React hooks and headless components for the Anonfly SDK. Build premium, secure messaging interfaces with ease.
+
+## Why use @anonfly/react?
+
+While `@anonfly/sdk` provides the core logic, `@anonfly/react` bridges the gap between the SDK and your React components. It handles state synchronization, WebSocket event lifecycle, and common UI patterns so you don't have to.
+
+- **Headless Hooks:** Pure logic hooks that give you full control over the UI.
+- **Automatic Sync:** State is kept in sync with the server and WebSocket events automatically.
+- **Provider Pattern:** Easily inject configuration across your entire application.
 
 ## Installation
 
@@ -11,24 +26,73 @@ npm install @anonfly/sdk @anonfly/react
 ## Quick Start
 
 ```tsx
-import { AnonflyProvider, MessageList, ChatInput } from '@anonfly/react';
+import { AnonflyProvider } from '@anonfly/react';
 
 const config = {
   apiKey: 'YOUR_API_KEY',
   baseUrl: 'https://api.anonfly.com/v1',
-  wsUrl: 'wss://api.anonfly.com',
 };
 
 function App() {
   return (
     <AnonflyProvider config={config}>
-      <MessageList roomId="general" />
-      <ChatInput roomId="general" />
+      <MainApp />
     </AnonflyProvider>
   );
 }
 ```
 
+## Core Hooks
+
+### `useAnonflyMessages(roomId)`
+Manages message fetching, sending, and real-time updates for a specific room.
+
+```tsx
+const { messages, loading, sendMessage, error } = useAnonflyMessages('general');
+```
+
+### `useAnonflyAuth()`
+Handles the authentication state, login, and registration.
+
+```tsx
+const { user, login, logout, isAuthenticated } = useAnonflyAuth();
+```
+
+### `useAnonflyPresence(roomId)`
+Track which users are currently online in a room.
+
+```tsx
+const { participants } = useAnonflyPresence('general');
+```
+
+### `useAnonflyConversations()`
+Lists and manages the current user's active rooms and conversations.
+
+```tsx
+const { conversations, refresh } = useAnonflyConversations();
+```
+
+## Advanced Usage
+
+### Customizing Reconnection Logic
+You can pass SDK-specific configuration directly to the `AnonflyProvider`.
+
+```tsx
+<AnonflyProvider config={{ ...config, retries: 5 }}>
+  {/* ... */}
+</AnonflyProvider>
+```
+
+### Accessing the SDK Instance
+If you need to perform low-level operations, you can access the raw SDK instance:
+
+```tsx
+import { useAnonfly } from '@anonfly/react';
+
+const sdk = useAnonfly();
+// sdk.http.get(...)
+```
+
 ## License
 
-MIT
+[MIT](../../LICENSE)

package/dist/hooks/useAnonflyAuth.d.ts

@@ -0,0 +1,17 @@
+import { AuthSession } from '@anonfly/sdk';
+/**
+ * Headless hook for Anonfly Authentication.
+ * Handles login, session management, and premium status.
+ */
+export declare function useAnonflyAuth(): {
+    session: AuthSession | null;
+    isAuthenticated: boolean;
+    loading: boolean;
+    error: Error | null;
+    login: (aid: string, username: string, challenge: string, signature: string, publicKey: string, exchangePublicKey: string) => Promise<AuthSession>;
+    logout: () => void;
+    getChallenge: (aid: string) => Promise<{
+        nonce: string;
+    }>;
+};
+//# sourceMappingURL=useAnonflyAuth.d.ts.map

package/dist/hooks/useAnonflyAuth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnonflyAuth.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnonflyAuth.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;;GAGG;AACH,wBAAgB,cAAc;;;;;iBAMY,MAAM,YAAY,MAAM,aAAa,MAAM,aAAa,MAAM,aAAa,MAAM,qBAAqB,MAAM;;wBA4BrG,MAAM;;;EAatD"}

package/dist/hooks/useAnonflyConversations.d.ts

@@ -0,0 +1,17 @@
+import { Room } from '@anonfly/sdk';
+/**
+ * Headless hook for browsing and managing Anonfly conversations (rooms).
+ */
+export declare function useAnonflyConversations(): {
+    rooms: Room[];
+    loading: boolean;
+    error: Error | null;
+    fetchRooms: (region?: string) => Promise<void>;
+    createRoom: (data: {
+        roomname: string;
+        isPrivate?: boolean;
+        description?: string;
+        password?: string;
+    }) => Promise<Room>;
+};
+//# sourceMappingURL=useAnonflyConversations.d.ts.map

package/dist/hooks/useAnonflyConversations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnonflyConversations.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnonflyConversations.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC;;GAEG;AACH,wBAAgB,uBAAuB;;;;0BAMY,MAAM;uBAYT;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE;EA0BjI"}

package/dist/hooks/useAnonflyMessages.d.ts

@@ -0,0 +1,16 @@
+import { Message } from '@anonfly/sdk';
+/**
+ * Headless hook for managing Anonfly messages within a specific room.
+ * Supports fetching history and subscribing to real-time updates.
+ */
+export declare function useAnonflyMessages(roomId?: string): {
+    messages: Message[];
+    loading: boolean;
+    error: Error | null;
+    fetchMessages: (options?: {
+        limit?: number;
+        before?: string;
+    }) => Promise<void>;
+    sendMessage: (content: string) => Promise<Message>;
+};
+//# sourceMappingURL=useAnonflyMessages.d.ts.map

package/dist/hooks/useAnonflyMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnonflyMessages.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnonflyMessages.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,CAAC,EAAE,MAAM;;;;8BAMK;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE;2BAatC,MAAM;EA4BzD"}

package/dist/hooks/useAnonflyPresence.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Headless hook for tracking presence and participants in a room.
+ */
+export declare function useAnonflyPresence(roomId?: string): {
+    participants: any[];
+    loading: boolean;
+    error: Error | null;
+};
+//# sourceMappingURL=useAnonflyPresence.d.ts.map

package/dist/hooks/useAnonflyPresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnonflyPresence.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnonflyPresence.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,CAAC,EAAE,MAAM;;;;EAgCjD"}

package/dist/index.cjs

@@ -21,11 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AnonflyProvider: () => AnonflyProvider,
-  ChatInput: () => ChatInput,
-  MessageList: () => MessageList,
   useAnonfly: () => useAnonfly,
-  useMessages: () => useMessages,
-  useRooms: () => useRooms
+  useAnonflyAuth: () => useAnonflyAuth,
+  useAnonflyConversations: () => useAnonflyConversations,
+  useAnonflyMessages: () => useAnonflyMessages,
+  useAnonflyPresence: () => useAnonflyPresence
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -46,158 +46,174 @@ var useAnonfly = () => {
   return context.client;
 };
 
-// src/hooks/useRooms.ts
+// src/hooks/useAnonflyAuth.ts
 var import_react2 = require("react");
-var useRooms = () => {
+function useAnonflyAuth() {
   const client = useAnonfly();
-  const [rooms, setRooms] = (0, import_react2.useState)([]);
-  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [session, setSession] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(false);
   const [error, setError] = (0, import_react2.useState)(null);
-  const fetchRooms = async () => {
+  const login = (0, import_react2.useCallback)(async (aid, username, challenge, signature, publicKey, exchangePublicKey) => {
+    setLoading(true);
+    setError(null);
     try {
-      setLoading(true);
-      const data = await client.rooms.list();
-      setRooms(data);
+      const authSession = await client.auth.verify({
+        challenge,
+        signature,
+        identity: {
+          aid,
+          username,
+          publicKey,
+          exchangePublicKey
+        }
+      });
+      setSession(authSession);
+      return authSession;
     } catch (err) {
       setError(err);
+      throw err;
     } finally {
       setLoading(false);
     }
-  };
-  (0, import_react2.useEffect)(() => {
-    fetchRooms();
   }, [client]);
-  return { rooms, loading, error, refetch: fetchRooms };
-};
+  const logout = (0, import_react2.useCallback)(() => {
+    setSession(null);
+  }, []);
+  const getChallenge = (0, import_react2.useCallback)(async (aid) => {
+    return client.auth.generateChallenge(aid);
+  }, [client]);
+  return {
+    session,
+    isAuthenticated: !!session,
+    loading,
+    error,
+    login,
+    logout,
+    getChallenge
+  };
+}
 
-// src/hooks/useMessages.ts
+// src/hooks/useAnonflyMessages.ts
 var import_react3 = require("react");
-var useMessages = (roomId) => {
+function useAnonflyMessages(roomId) {
   const client = useAnonfly();
   const [messages, setMessages] = (0, import_react3.useState)([]);
-  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)(null);
+  const fetchMessages = (0, import_react3.useCallback)(async (options) => {
+    if (!roomId) return;
+    setLoading(true);
+    try {
+      const data = await client.messages.list(roomId, options);
+      setMessages(data);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [client, roomId]);
+  const sendMessage = (0, import_react3.useCallback)(async (content) => {
+    if (!roomId) throw new Error("Room ID is required to send a message");
+    return client.messages.send(roomId, content);
+  }, [client, roomId]);
   (0, import_react3.useEffect)(() => {
-    const fetchMessages = async () => {
-      try {
-        setLoading(true);
-        const data = await client.messages.list(roomId);
-        setMessages(data);
-      } catch (err) {
-        setError(err);
-      } finally {
-        setLoading(false);
+    if (!roomId || !client.ws) return;
+    const handler = (event) => {
+      if (event.type === "message" && event.data.roomId === roomId) {
+        setMessages((prev) => [...prev, event.data]);
       }
     };
-    fetchMessages();
-    if (client.ws) {
-      const handleMessage = (msg) => {
-        if (msg.roomId === roomId) {
-          setMessages((prev) => [...prev, msg]);
-        }
-      };
-      client.ws.on("message", handleMessage);
-      return () => {
-        client.ws?.off("message", handleMessage);
-      };
-    }
-  }, [client, roomId]);
-  const sendMessage = async (content) => {
-    const newMessage = await client.messages.send(roomId, content);
-    return newMessage;
+    client.ws.on("message", handler);
+    return () => {
+      client.ws?.removeListener("message", handler);
+    };
+  }, [client.ws, roomId]);
+  return {
+    messages,
+    loading,
+    error,
+    fetchMessages,
+    sendMessage
   };
-  return { messages, loading, error, sendMessage };
-};
-
-// src/components/MessageList.tsx
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
-var MessageList = ({ roomId, className }) => {
-  const { messages, loading, error } = useMessages(roomId);
-  if (loading && messages.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 text-center opacity-50", children: "Loading messages..." });
-  }
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-4 text-center text-red-500", children: [
-      "Error: ",
-      error.message
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("flex flex-col gap-4 overflow-y-auto p-4", className), children: messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-bold opacity-70", children: msg.senderId }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] opacity-40", children: new Date(msg.timestamp).toLocaleTimeString() })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-lg bg-gray-100 p-3 text-sm dark:bg-zinc-800", children: msg.content })
-  ] }, msg.id)) });
-};
 
-// src/components/ChatInput.tsx
+// src/hooks/useAnonflyConversations.ts
 var import_react4 = require("react");
-var import_lucide_react = require("lucide-react");
-var import_clsx2 = require("clsx");
-var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function cn2(...inputs) {
-  return (0, import_tailwind_merge2.twMerge)((0, import_clsx2.clsx)(inputs));
-}
-var ChatInput = ({ roomId, className, placeholder = "Type a message..." }) => {
-  const { sendMessage } = useMessages(roomId);
-  const [content, setContent] = (0, import_react4.useState)("");
-  const [sending, setSending] = (0, import_react4.useState)(false);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!content.trim() || sending) return;
+function useAnonflyConversations() {
+  const client = useAnonfly();
+  const [rooms, setRooms] = (0, import_react4.useState)([]);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const fetchRooms = (0, import_react4.useCallback)(async (region) => {
+    setLoading(true);
     try {
-      setSending(true);
-      await sendMessage(content);
-      setContent("");
+      const data = await client.rooms.list(region);
+      setRooms(data);
     } catch (err) {
-      console.error("Failed to send message:", err);
+      setError(err);
     } finally {
-      setSending(false);
+      setLoading(false);
     }
+  }, [client]);
+  const createRoom = (0, import_react4.useCallback)(async (data) => {
+    return client.rooms.create(data);
+  }, [client]);
+  (0, import_react4.useEffect)(() => {
+    let unsubscribe;
+    client.rooms.subscribeToPublicList((updatedRooms) => {
+      setRooms(updatedRooms);
+    }).then((unsub) => {
+      unsubscribe = unsub;
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [client]);
+  return {
+    rooms,
+    loading,
+    error,
+    fetchRooms,
+    createRoom
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: cn2("flex items-center gap-2 border-t p-4 dark:border-zinc-800", className),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "input",
-          {
-            type: "text",
-            value: content,
-            onChange: (e) => setContent(e.target.value),
-            placeholder,
-            disabled: sending,
-            className: "flex-1 rounded-full bg-gray-100 px-4 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            type: "submit",
-            disabled: sending || !content.trim(),
-            className: "flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 font-bold text-white transition-opacity hover:opacity-90 disabled:opacity-50",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Send, { className: "h-4 w-4" })
-          }
-        )
-      ]
-    }
-  );
-};
+}
+
+// src/hooks/useAnonflyPresence.ts
+var import_react5 = require("react");
+function useAnonflyPresence(roomId) {
+  const client = useAnonfly();
+  const [participants, setParticipants] = (0, import_react5.useState)([]);
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!roomId) return;
+    setLoading(true);
+    let unsubscribe;
+    client.rooms.subscribeToRoomDetails(roomId, (details) => {
+      setParticipants(details.participants);
+      setLoading(false);
+    }).then((unsub) => {
+      unsubscribe = unsub;
+    }).catch((err) => {
+      setError(err);
+      setLoading(false);
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [client, roomId]);
+  return {
+    participants,
+    loading,
+    error
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnonflyProvider,
-  ChatInput,
-  MessageList,
   useAnonfly,
-  useMessages,
-  useRooms
+  useAnonflyAuth,
+  useAnonflyConversations,
+  useAnonflyMessages,
+  useAnonflyPresence
 });

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export * from './context/AnonflyContext.js';
-export * from './hooks/useRooms.js';
-export * from './hooks/useMessages.js';
-export * from './components/MessageList.js';
-export * from './components/ChatInput.js';
+export * from './context/AnonflyContext';
+export * from './hooks/useAnonflyAuth';
+export * from './hooks/useAnonflyMessages';
+export * from './hooks/useAnonflyConversations';
+export * from './hooks/useAnonflyPresence';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC"}

package/dist/index.js

@@ -15,157 +15,173 @@ var useAnonfly = () => {
   return context.client;
 };
 
-// src/hooks/useRooms.ts
-import { useEffect, useState } from "react";
-var useRooms = () => {
+// src/hooks/useAnonflyAuth.ts
+import { useState, useCallback } from "react";
+function useAnonflyAuth() {
   const client = useAnonfly();
-  const [rooms, setRooms] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const [session, setSession] = useState(null);
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const fetchRooms = async () => {
+  const login = useCallback(async (aid, username, challenge, signature, publicKey, exchangePublicKey) => {
+    setLoading(true);
+    setError(null);
     try {
-      setLoading(true);
-      const data = await client.rooms.list();
-      setRooms(data);
+      const authSession = await client.auth.verify({
+        challenge,
+        signature,
+        identity: {
+          aid,
+          username,
+          publicKey,
+          exchangePublicKey
+        }
+      });
+      setSession(authSession);
+      return authSession;
     } catch (err) {
       setError(err);
+      throw err;
     } finally {
       setLoading(false);
     }
-  };
-  useEffect(() => {
-    fetchRooms();
   }, [client]);
-  return { rooms, loading, error, refetch: fetchRooms };
-};
+  const logout = useCallback(() => {
+    setSession(null);
+  }, []);
+  const getChallenge = useCallback(async (aid) => {
+    return client.auth.generateChallenge(aid);
+  }, [client]);
+  return {
+    session,
+    isAuthenticated: !!session,
+    loading,
+    error,
+    login,
+    logout,
+    getChallenge
+  };
+}
 
-// src/hooks/useMessages.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-var useMessages = (roomId) => {
+// src/hooks/useAnonflyMessages.ts
+import { useState as useState2, useCallback as useCallback2, useEffect } from "react";
+function useAnonflyMessages(roomId) {
   const client = useAnonfly();
   const [messages, setMessages] = useState2([]);
-  const [loading, setLoading] = useState2(true);
+  const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(null);
-  useEffect2(() => {
-    const fetchMessages = async () => {
-      try {
-        setLoading(true);
-        const data = await client.messages.list(roomId);
-        setMessages(data);
-      } catch (err) {
-        setError(err);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchMessages();
-    if (client.ws) {
-      const handleMessage = (msg) => {
-        if (msg.roomId === roomId) {
-          setMessages((prev) => [...prev, msg]);
-        }
-      };
-      client.ws.on("message", handleMessage);
-      return () => {
-        client.ws?.off("message", handleMessage);
-      };
+  const fetchMessages = useCallback2(async (options) => {
+    if (!roomId) return;
+    setLoading(true);
+    try {
+      const data = await client.messages.list(roomId, options);
+      setMessages(data);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
     }
   }, [client, roomId]);
-  const sendMessage = async (content) => {
-    const newMessage = await client.messages.send(roomId, content);
-    return newMessage;
+  const sendMessage = useCallback2(async (content) => {
+    if (!roomId) throw new Error("Room ID is required to send a message");
+    return client.messages.send(roomId, content);
+  }, [client, roomId]);
+  useEffect(() => {
+    if (!roomId || !client.ws) return;
+    const handler = (event) => {
+      if (event.type === "message" && event.data.roomId === roomId) {
+        setMessages((prev) => [...prev, event.data]);
+      }
+    };
+    client.ws.on("message", handler);
+    return () => {
+      client.ws?.removeListener("message", handler);
+    };
+  }, [client.ws, roomId]);
+  return {
+    messages,
+    loading,
+    error,
+    fetchMessages,
+    sendMessage
   };
-  return { messages, loading, error, sendMessage };
-};
-
-// src/components/MessageList.tsx
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
 }
-var MessageList = ({ roomId, className }) => {
-  const { messages, loading, error } = useMessages(roomId);
-  if (loading && messages.length === 0) {
-    return /* @__PURE__ */ jsx2("div", { className: "p-4 text-center opacity-50", children: "Loading messages..." });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs("div", { className: "p-4 text-center text-red-500", children: [
-      "Error: ",
-      error.message
-    ] });
-  }
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col gap-4 overflow-y-auto p-4", className), children: messages.map((msg) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx2("span", { className: "text-xs font-bold opacity-70", children: msg.senderId }),
-      /* @__PURE__ */ jsx2("span", { className: "text-[10px] opacity-40", children: new Date(msg.timestamp).toLocaleTimeString() })
-    ] }),
-    /* @__PURE__ */ jsx2("div", { className: "rounded-lg bg-gray-100 p-3 text-sm dark:bg-zinc-800", children: msg.content })
-  ] }, msg.id)) });
-};
 
-// src/components/ChatInput.tsx
-import { useState as useState3 } from "react";
-import { Send } from "lucide-react";
-import { clsx as clsx2 } from "clsx";
-import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function cn2(...inputs) {
-  return twMerge2(clsx2(inputs));
-}
-var ChatInput = ({ roomId, className, placeholder = "Type a message..." }) => {
-  const { sendMessage } = useMessages(roomId);
-  const [content, setContent] = useState3("");
-  const [sending, setSending] = useState3(false);
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!content.trim() || sending) return;
+// src/hooks/useAnonflyConversations.ts
+import { useState as useState3, useCallback as useCallback3, useEffect as useEffect2 } from "react";
+function useAnonflyConversations() {
+  const client = useAnonfly();
+  const [rooms, setRooms] = useState3([]);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const fetchRooms = useCallback3(async (region) => {
+    setLoading(true);
     try {
-      setSending(true);
-      await sendMessage(content);
-      setContent("");
+      const data = await client.rooms.list(region);
+      setRooms(data);
     } catch (err) {
-      console.error("Failed to send message:", err);
+      setError(err);
     } finally {
-      setSending(false);
+      setLoading(false);
     }
+  }, [client]);
+  const createRoom = useCallback3(async (data) => {
+    return client.rooms.create(data);
+  }, [client]);
+  useEffect2(() => {
+    let unsubscribe;
+    client.rooms.subscribeToPublicList((updatedRooms) => {
+      setRooms(updatedRooms);
+    }).then((unsub) => {
+      unsubscribe = unsub;
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [client]);
+  return {
+    rooms,
+    loading,
+    error,
+    fetchRooms,
+    createRoom
   };
-  return /* @__PURE__ */ jsxs2(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: cn2("flex items-center gap-2 border-t p-4 dark:border-zinc-800", className),
-      children: [
-        /* @__PURE__ */ jsx3(
-          "input",
-          {
-            type: "text",
-            value: content,
-            onChange: (e) => setContent(e.target.value),
-            placeholder,
-            disabled: sending,
-            className: "flex-1 rounded-full bg-gray-100 px-4 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800"
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          "button",
-          {
-            type: "submit",
-            disabled: sending || !content.trim(),
-            className: "flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 font-bold text-white transition-opacity hover:opacity-90 disabled:opacity-50",
-            children: /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" })
-          }
-        )
-      ]
-    }
-  );
-};
+}
+
+// src/hooks/useAnonflyPresence.ts
+import { useState as useState4, useEffect as useEffect3 } from "react";
+function useAnonflyPresence(roomId) {
+  const client = useAnonfly();
+  const [participants, setParticipants] = useState4([]);
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  useEffect3(() => {
+    if (!roomId) return;
+    setLoading(true);
+    let unsubscribe;
+    client.rooms.subscribeToRoomDetails(roomId, (details) => {
+      setParticipants(details.participants);
+      setLoading(false);
+    }).then((unsub) => {
+      unsubscribe = unsub;
+    }).catch((err) => {
+      setError(err);
+      setLoading(false);
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [client, roomId]);
+  return {
+    participants,
+    loading,
+    error
+  };
+}
 export {
   AnonflyProvider,
-  ChatInput,
-  MessageList,
   useAnonfly,
-  useMessages,
-  useRooms
+  useAnonflyAuth,
+  useAnonflyConversations,
+  useAnonflyMessages,
+  useAnonflyPresence
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anonfly/react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "React UI components for Anonfly SDK",
   "main": "./dist/index.cjs",
@@ -17,22 +17,22 @@
     "dev": "tsup src/index.ts --format cjs,esm --watch --dts --external react"
   },
   "dependencies": {
-    "@anonfly/sdk": "0.0.0",
-    "lucide-react": "^0.300.0",
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.0"
+    "@anonfly/sdk": "^1.0.1",
+    "lucide-react": "^0.473.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.1"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
   },
   "publishConfig": {
     "access": "public"