@poolse/react 1.0.1-beta.0 → 1.0.2

package/dist/index.d.ts

@@ -325,38 +325,76 @@ declare function usePresence(conversationId: string): UsePresenceState;
  */
 declare function useRealtimeStatus(): RealtimeStatus;
 
+type UploadItemStatus = 'pending' | 'uploading' | 'ready' | 'error' | 'cancelled';
+interface UploadItem {
+    /** Local-only id (random per-enqueue). Stable for keys + `cancel(localId)` / `remove(localId)`. */
+    localId: string;
+    filename: string;
+    contentType: string;
+    byteSize: number;
+    status: UploadItemStatus;
+    /** Bytes uploaded so far; 0 until the PUT actually begins. */
+    loaded: number;
+    /** Resolved attachment row once `status === 'ready'`. Null otherwise. */
+    attachment: Attachment | null;
+    /** Set when `status === 'error'`. */
+    error: Error | null;
+}
 interface UseAttachmentUploadState {
-    /** Last successfully uploaded attachment, or null. */
+    /** Every enqueued item, in enqueue order, until removed by `remove()` / `reset()`. */
+    queue: UploadItem[];
+    /**
+     * Last attachment that reached `ready`, for the common one-file
+     * "did the upload finish" check. Null after `reset()` / `remove()`
+     * of the most recent ready item. Multi-file callers should iterate
+     * `queue` instead.
+     */
     attachment: Attachment | null;
+    /** True while at least one item is `pending` or `uploading`. */
     uploading: boolean;
+    /** Most recent item-level error, or null. */
     error: Error | null;
     /**
-     * Run the upload pipeline (presigned-URL request + PUT). Updates
-     * local state with the resolved attachment on success; sets `error`
-     * and rethrows on failure so callers can surface a toast.
+     * Enqueue a single upload. Resolves with the final attachment row.
+     * Rejects with the underlying error (item's `status` becomes
+     * `'error'`); aborts surface as a DOMException('AbortError') and the
+     * item's status becomes `'cancelled'`.
      */
     upload: (input: AttachmentUploadInput) => Promise<Attachment>;
-    /** Reset state (clears `attachment`, `error`). */
+    /**
+     * Enqueue many at once — drag-and-drop, multi-file picker. Items run
+     * in parallel (the SDK is per-call independent). Resolves with the
+     * attachments in the same order as the input; if any item fails the
+     * whole promise rejects after the others settle.
+     */
+    uploadAll: (inputs: AttachmentUploadInput[]) => Promise<Attachment[]>;
+    /** Abort an in-flight upload. Sets the item's status to `cancelled`. No-op if not in flight. */
+    cancel: (localId: string) => void;
+    /** Drop an item from the queue. Cancels first if it's still in flight. */
+    remove: (localId: string) => void;
+    /** Drop everything + abort any in-flight uploads. */
     reset: () => void;
 }
 /**
- * Stateful wrapper around `chat.attachments.upload`. Provides
- * `uploading` + `error` flags for the common "show a spinner while
- * the PUT is in flight" UI, plus retention of the last attachment
- * so the caller can reference its id when sending a message.
+ * Stateful wrapper around `chat.attachments.upload`. Exposes a queue
+ * of in-flight / completed uploads with per-item progress + per-item
+ * cancel — drag-and-drop, multi-file picker, retry chips, all without
+ * the host app reimplementing AbortController plumbing.
  *
  * ```tsx
- * const { upload, uploading, attachment } = useAttachmentUpload();
- * const onPick = async (file: File) => {
- *   const att = await upload({
- *     body: file, contentType: file.type, byteSize: file.size, filename: file.name
- *   });
+ * const { upload, queue, cancel, remove } = useAttachmentUpload();
+ * const onPick = async (files: File[]) => {
+ *   const atts = await uploadAll(files.map(f => ({
+ *     body: f, contentType: f.type, byteSize: f.size, filename: f.name
+ *   })));
  *   await chat.conversations.one(convId).messages.send({
- *     body: 'attached',
- *     custom_data: { attachment_id: att.id },
+ *     body: '', attachment_ids: atts.map(a => a.id),
  *   });
  * };
  * ```
+ *
+ * The legacy `upload(input)` → `Promise<Attachment>` shape is preserved
+ * so older callers keep working — they just won't render the queue UI.
  */
 declare function useAttachmentUpload(): UseAttachmentUploadState;
 
@@ -402,4 +440,4 @@ interface UseUserState {
  */
 declare function useUser(userId: Uuid | null | undefined): UseUserState;
 
-export { PoolseProvider, type PoolseProviderProps, type ReactionMap, type UseUserState, useAttachmentUpload, useAttachmentUrl, useConversation, useConversations, useMe, useMembers, useMessages, usePoolse, usePresence, useReactions, useRealtimeStatus, useThread, useTyping, useUser };
+export { PoolseProvider, type PoolseProviderProps, type ReactionMap, type UploadItem, type UploadItemStatus, type UseUserState, useAttachmentUpload, useAttachmentUrl, useConversation, useConversations, useMe, useMembers, useMessages, usePoolse, usePresence, useReactions, useRealtimeStatus, useThread, useTyping, useUser };

package/dist/index.js

@@ -31,7 +31,11 @@ function PoolseProvider({ config, children }) {
       ...initial.generateIdempotencyKey ? { generateIdempotencyKey: () => configRef.current.generateIdempotencyKey() } : {},
       ...initial.wsUrl !== void 0 ? { wsUrl: initial.wsUrl } : {},
       ...initial.socketPath !== void 0 ? { socketPath: initial.socketPath } : {},
-      ...initial.onSocketError ? { onSocketError: (err) => configRef.current.onSocketError(err) } : {}
+      ...initial.onSocketError ? { onSocketError: (err) => configRef.current.onSocketError(err) } : {},
+      // Customer's user metadata resolver — name + avatar lookup.
+      // Read through the ref so the customer can swap the closure
+      // (e.g. switch tenant context) without re-mounting.
+      ...initial.userResolver ? { userResolver: (id) => configRef.current.userResolver(id) } : {}
     });
   }, []);
   if (process.env.NODE_ENV !== "production") {
@@ -223,7 +227,6 @@ function useMembers(conversationId) {
         hasFetchedRef.current = true;
       } catch (err) {
         if (err?.name === "AbortError") return;
-        console.error("[poolse] useMembers fetch failed:", err);
         setError(err instanceof Error ? err : new Error(String(err)));
       } finally {
         setLoading(false);
@@ -749,6 +752,7 @@ function usePresence(conversationId) {
   const [online, setOnline] = useState(/* @__PURE__ */ new Set());
   useEffect(() => {
     setOnline(/* @__PURE__ */ new Set());
+    if (!conversationId) return;
     const conv = chat.realtime.conversation(conversationId);
     const applyState = (state) => {
       setOnline(new Set(Object.keys(state)));
@@ -781,45 +785,107 @@ function useRealtimeStatus() {
 }
 function useAttachmentUpload() {
   const chat = usePoolse();
-  const [attachment, setAttachment] = useState(null);
-  const [uploading, setUploading] = useState(false);
-  const [error, setError] = useState(null);
-  const inFlightRef = useRef(null);
-  const upload = useCallback(
-    async (input) => {
-      inFlightRef.current?.abort();
+  const [queue, setQueue] = useState([]);
+  const inFlightRef = useRef(/* @__PURE__ */ new Map());
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      for (const v of inFlightRef.current.values()) v.controller.abort();
+      inFlightRef.current.clear();
+    };
+  }, []);
+  const updateItem = useCallback((localId, patch) => {
+    if (!mountedRef.current) return;
+    setQueue((q) => q.map((it) => it.localId === localId ? { ...it, ...patch } : it));
+  }, []);
+  const runUpload = useCallback(
+    async (localId, input) => {
       const controller = new AbortController();
-      inFlightRef.current = controller;
-      setUploading(true);
-      setError(null);
+      inFlightRef.current.set(localId, { controller });
+      updateItem(localId, { status: "uploading", loaded: 0 });
       try {
-        const att = await chat.attachments.upload(input, { signal: controller.signal });
-        if (inFlightRef.current === controller) {
-          setAttachment(att);
-        }
+        const att = await chat.attachments.upload(input, {
+          signal: controller.signal,
+          onProgress: (e) => updateItem(localId, { loaded: e.loaded })
+        });
+        updateItem(localId, {
+          status: "ready",
+          loaded: input.byteSize,
+          attachment: att,
+          error: null
+        });
         return att;
       } catch (err) {
-        if (err?.name === "AbortError") throw err;
+        if (err?.name === "AbortError") {
+          updateItem(localId, { status: "cancelled" });
+          throw err;
+        }
         const e = err instanceof Error ? err : new Error(String(err));
-        setError(e);
+        updateItem(localId, { status: "error", error: e });
         throw e;
       } finally {
-        if (inFlightRef.current === controller) {
-          setUploading(false);
-          inFlightRef.current = null;
-        }
+        inFlightRef.current.delete(localId);
       }
     },
-    [chat]
+    [chat, updateItem]
+  );
+  const enqueue = useCallback((input) => {
+    const localId = generateLocalId();
+    const item = {
+      localId,
+      filename: input.filename ?? "file",
+      contentType: input.contentType,
+      byteSize: input.byteSize,
+      status: "pending",
+      loaded: 0,
+      attachment: null,
+      error: null
+    };
+    setQueue((q) => [...q, item]);
+    return item;
+  }, []);
+  const upload = useCallback(
+    (input) => {
+      const item = enqueue(input);
+      return runUpload(item.localId, input);
+    },
+    [enqueue, runUpload]
+  );
+  const uploadAll = useCallback(
+    (inputs) => {
+      const items = inputs.map((inp) => ({ item: enqueue(inp), input: inp }));
+      return Promise.all(items.map(({ item, input }) => runUpload(item.localId, input)));
+    },
+    [enqueue, runUpload]
+  );
+  const cancel = useCallback((localId) => {
+    const inf = inFlightRef.current.get(localId);
+    if (inf) inf.controller.abort();
+  }, []);
+  const remove = useCallback(
+    (localId) => {
+      const inf = inFlightRef.current.get(localId);
+      if (inf) inf.controller.abort();
+      setQueue((q) => q.filter((it) => it.localId !== localId));
+    },
+    []
   );
   const reset = useCallback(() => {
-    inFlightRef.current?.abort();
-    inFlightRef.current = null;
-    setAttachment(null);
-    setError(null);
-    setUploading(false);
+    for (const v of inFlightRef.current.values()) v.controller.abort();
+    inFlightRef.current.clear();
+    setQueue([]);
   }, []);
-  return { attachment, uploading, error, upload, reset };
+  const uploading = queue.some((it) => it.status === "pending" || it.status === "uploading");
+  const error = queue.reduce((acc, it) => it.error ?? acc, null);
+  const attachment = queue.reduce((acc, it) => it.attachment ?? acc, null);
+  return { queue, attachment, uploading, error, upload, uploadAll, cancel, remove, reset };
+}
+function generateLocalId() {
+  const c = globalThis.crypto;
+  if (c && typeof c.randomUUID === "function") return c.randomUUID();
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
 function useAttachmentUrl(attachmentId) {
   const chat = usePoolse();
@@ -872,12 +938,12 @@ function useUser(userId) {
       const cached = chat.users.peek(userId);
       if (cached === void 0) {
         setState({ profile: null, loading: true });
+        void chat.users.get(userId);
       } else {
         setState({ profile: cached, loading: false });
       }
     };
     const off = chat.users.subscribe(userId, apply);
-    void chat.users.get(userId);
     apply();
     return off;
   }, [chat, userId]);