@meshagent/meshagent-react 0.38.1 → 0.38.3

package/dist/esm/room-connection-scope.js

@@ -1,7 +1,14 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { ParticipantToken, RoomClient, RoomMessageEvent, RoomServerException, WebSocketClientProtocol, } from '@meshagent/meshagent';
 import { subscribe } from './subscribe-async-gen';
-import { RoomMessageEvent } from '@meshagent/meshagent';
-import { ParticipantToken, RoomClient, WebSocketClientProtocol, } from '@meshagent/meshagent';
+const retryBaseDelayMs = 500;
+const retryMaxDelayMs = 30000;
+function getRetryDelayMs(retryCount) {
+    return Math.min(retryMaxDelayMs, retryBaseDelayMs * 2 ** retryCount);
+}
+function isRetryableConnectionError(error) {
+    return error instanceof RoomServerException && error.retryable;
+}
 /* -------------------------------------------------
  * Authorization helpers
  * ------------------------------------------------- */
@@ -14,71 +21,169 @@ export const developmentAuthorization = ({ url, projectId, apiKeyId, participant
     token.addRoomGrant(roomName);
     token.addRoleGrant('user');
     const jwt = await token.toJwt({ token: secret });
-    return { url, jwt };
+    return {
+        jwt,
+        projectId,
+        roomName,
+        roomUrl: url,
+    };
 };
-export function useRoomConnection(props) {
-    const { authorization, enableMessaging = true } = props;
+export const staticAuthorization = ({ projectId, roomName, url, jwt, }) => async () => ({
+    jwt,
+    projectId,
+    roomName,
+    roomUrl: url,
+});
+export function useRoomConnection({ reconnectKey, authorization, enableMessaging = true, onReady, oauthTokenRequestHandler, secretRequestHandler, roomClientFactory, }) {
     const [client, setClient] = useState(null);
     const [ready, setReady] = useState(false);
     const [state, setState] = useState('authorizing');
     const [error, setError] = useState(null);
-    // Keep the latest client in a ref so we can call `dispose` in cleanup.
     const clientRef = useRef(null);
-    clientRef.current = client;
-    // Instance method exposed to consumers (rarely needed).
-    const dispose = () => {
-        clientRef.current?.dispose();
-        setState('done');
-    };
+    const cancelConnectionRef = useRef(() => { });
     useEffect(() => {
         let cancelled = false;
-        const connect = async () => {
-            try {
-                // 1️⃣  Get connection credentials
-                const { url, jwt } = await authorization();
-                if (cancelled)
+        let retryTimeout = null;
+        const clearRetryTimeout = () => {
+            if (retryTimeout != null) {
+                clearTimeout(retryTimeout);
+                retryTimeout = null;
+            }
+        };
+        const disposeClient = (room) => {
+            if (room == null) {
+                return;
+            }
+            if (clientRef.current === room) {
+                clientRef.current = null;
+            }
+            room.dispose();
+        };
+        const waitForRetry = (delayMs) => new Promise((resolve) => {
+            retryTimeout = setTimeout(() => {
+                retryTimeout = null;
+                resolve();
+            }, delayMs);
+        });
+        setClient(null);
+        setReady(false);
+        const cancelConnection = ({ updateState }) => {
+            if (cancelled) {
+                return;
+            }
+            cancelled = true;
+            clearRetryTimeout();
+            const currentClient = clientRef.current;
+            clientRef.current = null;
+            disposeClient(currentClient);
+            if (updateState) {
+                setClient(null);
+                setReady(false);
+            }
+        };
+        cancelConnectionRef.current = () => cancelConnection({ updateState: true });
+        void (async () => {
+            let retryCount = 0;
+            while (!cancelled) {
+                let connectionInfo;
+                try {
+                    setState('authorizing');
+                    setError(null);
+                    connectionInfo = await authorization();
+                }
+                catch (nextError) {
+                    if (cancelled) {
+                        return;
+                    }
+                    setError(nextError);
+                    setState('done');
+                    setReady(false);
                     return;
-                const room = new RoomClient({
-                    protocolFactory: WebSocketClientProtocol.createFactory({ url, token: jwt }),
-                });
-                setClient(room);
-                setState('connecting');
-                await room.start({
-                    onDone: () => {
-                        if (cancelled)
-                            return;
-                        setState('done');
-                    },
-                    onError: (e) => {
-                        if (cancelled)
-                            return;
-                        setError(e);
-                        setState('done');
-                    },
-                });
-                if (enableMessaging) {
-                    room.messaging.enable();
                 }
-                if (cancelled)
+                if (cancelled) {
                     return;
-                setState('ready');
-                setReady(true);
-            }
-            catch (e) {
-                if (cancelled)
+                }
+                let nextClient;
+                if (roomClientFactory != null) {
+                    nextClient = roomClientFactory(connectionInfo);
+                }
+                else {
+                    nextClient = new RoomClient({
+                        protocolFactory: WebSocketClientProtocol.createFactory({
+                            url: connectionInfo.roomUrl,
+                            token: connectionInfo.jwt,
+                        }),
+                        oauthTokenRequestHandler: oauthTokenRequestHandler == null
+                            ? undefined
+                            : (request) => oauthTokenRequestHandler(nextClient, request),
+                        secretRequestHandler: secretRequestHandler == null
+                            ? undefined
+                            : (request) => secretRequestHandler(nextClient, request),
+                    });
+                }
+                clientRef.current = nextClient;
+                setClient(nextClient);
+                setReady(false);
+                setState('connecting');
+                try {
+                    await nextClient.start({
+                        onDone: () => {
+                            if (cancelled || clientRef.current !== nextClient) {
+                                return;
+                            }
+                            setReady(false);
+                            setState('done');
+                        },
+                        onError: (nextError) => {
+                            if (cancelled || clientRef.current !== nextClient) {
+                                return;
+                            }
+                            setError(nextError);
+                            setReady(false);
+                            setState('done');
+                        },
+                    });
+                    if (enableMessaging) {
+                        nextClient.messaging.enable();
+                    }
+                    if (cancelled || clientRef.current !== nextClient) {
+                        disposeClient(nextClient);
+                        return;
+                    }
+                    retryCount = 0;
+                    setError(null);
+                    setReady(true);
+                    setState('ready');
+                    onReady?.(nextClient);
                     return;
-                setError(e);
-                setState('done');
+                }
+                catch (nextError) {
+                    disposeClient(nextClient);
+                    if (cancelled) {
+                        return;
+                    }
+                    setClient((currentClient) => currentClient === nextClient ? null : currentClient);
+                    setReady(false);
+                    setError(nextError);
+                    if (!isRetryableConnectionError(nextError)) {
+                        setState('done');
+                        return;
+                    }
+                    setState('retrying');
+                    await waitForRetry(getRetryDelayMs(retryCount));
+                    retryCount += 1;
+                }
             }
-        };
-        connect();
+        })();
         return () => {
-            // React unmount or deps change → cancel & dispose
-            cancelled = true;
-            dispose();
+            cancelConnection({ updateState: false });
+            cancelConnectionRef.current = () => { };
         };
-        // eslint‑disable‑next‑line react-hooks/exhaustive-deps
-    }, []); // run once, just like componentDidMount
+    }, [reconnectKey, enableMessaging, roomClientFactory]);
+    const dispose = () => {
+        cancelConnectionRef.current();
+        setState('done');
+    };
     return {
         client,
         state,
@@ -94,48 +199,59 @@ export function useRoomIndicators({ room, path }) {
     const [typing, setTyping] = useState(false);
     const [thinking, setThinking] = useState(false);
     useEffect(() => {
-        if (!room)
+        if (!room) {
             return;
-        const s = subscribe(room.listen(), {
+        }
+        setTyping(false);
+        setThinking(false);
+        const subscription = subscribe(room.listen(), {
             next: (event) => {
-                if (event instanceof RoomMessageEvent) {
-                    const { message } = event;
-                    // Ignore messages from ourselves
-                    if (message.fromParticipantId === room.localParticipant?.id) {
-                        return;
-                    }
-                    // Ignore messages not for this path
-                    if (message.message.path !== path) {
-                        return;
-                    }
-                    if (message.type === "typing") {
-                        // Clear any existing timer for this participant
-                        clearTimeout(typingMap.current[message.fromParticipantId]);
-                        // Set a new timer to remove typing after 1 second
-                        typingMap.current[message.fromParticipantId] = setTimeout(() => {
-                            delete typingMap.current[message.fromParticipantId];
-                            setTyping(Object.keys(typingMap.current).length > 0);
-                        }, 1000);
-                        // Update typing state
+                if (!(event instanceof RoomMessageEvent)) {
+                    return;
+                }
+                const { message } = event;
+                if (message.fromParticipantId === room.localParticipant?.id) {
+                    return;
+                }
+                if (message.message.path !== path) {
+                    return;
+                }
+                if (message.type === 'typing') {
+                    clearTimeout(typingMap.current[message.fromParticipantId]);
+                    typingMap.current[message.fromParticipantId] = setTimeout(() => {
+                        delete typingMap.current[message.fromParticipantId];
                         setTyping(Object.keys(typingMap.current).length > 0);
-                    }
-                    else if (message.type === "thinking") {
-                        clearTimeout(thinkingMap.current[message.fromParticipantId]);
-                        if (message.message.thinking) {
-                            thinkingMap.current[message.fromParticipantId] = setTimeout(() => {
-                                delete thinkingMap.current[message.fromParticipantId];
-                                setThinking(Object.keys(thinkingMap.current).length > 0);
-                            }, 5000);
-                        }
-                        else {
-                            delete thinkingMap.current[message.fromParticipantId];
-                        }
+                    }, 1000);
+                    setTyping(Object.keys(typingMap.current).length > 0);
+                    return;
+                }
+                if (message.type !== 'thinking') {
+                    return;
+                }
+                clearTimeout(thinkingMap.current[message.fromParticipantId]);
+                if (message.message.thinking) {
+                    thinkingMap.current[message.fromParticipantId] = setTimeout(() => {
+                        delete thinkingMap.current[message.fromParticipantId];
                         setThinking(Object.keys(thinkingMap.current).length > 0);
-                    }
+                    }, 5000);
+                }
+                else {
+                    delete thinkingMap.current[message.fromParticipantId];
                 }
+                setThinking(Object.keys(thinkingMap.current).length > 0);
             },
         });
-        return () => s.unsubscribe();
-    }, [room, path]);
+        return () => {
+            subscription.unsubscribe();
+            for (const timeout of Object.values(typingMap.current)) {
+                clearTimeout(timeout);
+            }
+            for (const timeout of Object.values(thinkingMap.current)) {
+                clearTimeout(timeout);
+            }
+            typingMap.current = {};
+            thinkingMap.current = {};
+        };
+    }, [path, room]);
     return { typing, thinking };
 }

package/dist/esm/room-participants.d.ts

@@ -0,0 +1,2 @@
+import { RoomClient, RemoteParticipant } from '@meshagent/meshagent';
+export declare function useRoomParticipants(room: RoomClient | null): RemoteParticipant[];

package/dist/esm/room-participants.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+function sameParticipantIds(currentParticipants, nextParticipants) {
+    if (currentParticipants.length !== nextParticipants.length) {
+        return false;
+    }
+    const currentParticipantIds = new Set(currentParticipants.map((participant) => participant.id));
+    for (const participant of nextParticipants) {
+        if (!currentParticipantIds.has(participant.id)) {
+            return false;
+        }
+    }
+    return true;
+}
+export function useRoomParticipants(room) {
+    const [participants, setParticipants] = useState([]);
+    useEffect(() => {
+        if (room == null) {
+            setParticipants([]);
+            return;
+        }
+        const updateParticipants = () => {
+            const nextParticipants = room.messaging.remoteParticipants;
+            setParticipants((currentParticipants) => {
+                if (sameParticipantIds(currentParticipants, nextParticipants)) {
+                    return currentParticipants;
+                }
+                return [...nextParticipants];
+            });
+        };
+        room.messaging.on('participant_added', updateParticipants);
+        room.messaging.on('participant_removed', updateParticipants);
+        room.messaging.on('messaging_enabled', updateParticipants);
+        room.on('disconnected', updateParticipants);
+        updateParticipants();
+        return () => {
+            room.messaging.off('participant_added', updateParticipants);
+            room.messaging.off('participant_removed', updateParticipants);
+            room.messaging.off('messaging_enabled', updateParticipants);
+            room.off('disconnected', updateParticipants);
+        };
+    }, [room]);
+    return participants;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meshagent/meshagent-react",
-    "version": "0.38.1",
+    "version": "0.38.3",
     "description": "Meshagent React Client",
     "homepage": "https://github.com/meshagent/meshagent-react",
     "scripts": {
@@ -36,7 +36,7 @@
         "base-64": "^1.0.0",
         "livekit-client": "^2.15.5",
         "react": "^19.1.0",
-        "@meshagent/meshagent": "^0.38.1",
+        "@meshagent/meshagent": "^0.38.3",
         "react-dom": "^19.1.0",
         "typescript": "^5.8.3",
         "uuid": "^11.1.0",

package/dist/cjs/chat.d.ts

@@ -1,33 +0,0 @@
-import { RoomClient, Element, Participant } from "@meshagent/meshagent";
-import { FileUpload } from "./file-upload";
-export interface ChatMessageArgs {
-    id: string;
-    text: string;
-    attachments?: string[];
-}
-export declare class ChatMessage {
-    id: string;
-    text: string;
-    attachments: string[];
-    constructor({ id, text, attachments }: ChatMessageArgs);
-}
-export interface UseMessageChatProps {
-    room: RoomClient;
-    path: string;
-    participants?: Participant[];
-    participantNames?: string[];
-    includeLocalParticipant?: boolean;
-    initialMessage?: ChatMessage;
-}
-export interface UseMessageChatResult {
-    messages: Element[];
-    sendMessage: (message: ChatMessage) => void;
-    selectAttachments: (files: File[]) => void;
-    attachments: FileUpload[];
-    setAttachments: (attachments: FileUpload[]) => void;
-    schemaFileExists: boolean;
-    onlineParticipants: Participant[];
-    cancelRequest?: () => void;
-}
-export declare function fileToAsyncIterable(file: File): AsyncIterable<Uint8Array>;
-export declare function useChat({ room, path, participants, participantNames, initialMessage, includeLocalParticipant }: UseMessageChatProps): UseMessageChatResult;

package/dist/cjs/chat.js

@@ -1,207 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatMessage = void 0;
-exports.fileToAsyncIterable = fileToAsyncIterable;
-exports.useChat = useChat;
-const react_1 = require("react");
-const meshagent_1 = require("@meshagent/meshagent");
-const file_upload_1 = require("./file-upload");
-const document_connection_scope_1 = require("./document-connection-scope");
-const document_connection_scope_2 = require("./document-connection-scope");
-class ChatMessage {
-    constructor({ id, text, attachments }) {
-        Object.defineProperty(this, "id", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "text", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "attachments", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.id = id;
-        this.text = text;
-        this.attachments = attachments ?? [];
-    }
-}
-exports.ChatMessage = ChatMessage;
-function getParticipantName(participant) {
-    const name = participant.getAttribute("name");
-    return typeof name === "string" && name.length > 0 ? name : null;
-}
-function ensureParticipants(document, localParticipant, includeLocalParticipant, participants, participantNames) {
-    const retParticipants = [
-        ...(participants ?? []),
-        ...(includeLocalParticipant ? [localParticipant] : []),
-    ];
-    const existing = new Set();
-    for (const child of document.root.getChildren()
-        .filter((c) => c instanceof meshagent_1.Element)) {
-        if (child.tagName === "members") {
-            for (const member of child.getChildren()
-                .filter((c) => c instanceof meshagent_1.Element)) {
-                const name = getParticipantName(member);
-                if (name)
-                    existing.add(name);
-            }
-            for (const part of retParticipants) {
-                const name = getParticipantName(part);
-                if (name && !existing.has(name)) {
-                    child.createChildElement("member", { name });
-                    existing.add(name);
-                }
-            }
-            if (participantNames != null) {
-                for (const name of participantNames) {
-                    if (!existing.has(name)) {
-                        child.createChildElement("member", { name });
-                        existing.add(name);
-                    }
-                }
-            }
-        }
-    }
-}
-function mapMessages(doc) {
-    const children = doc.root.getChildren() || [];
-    const thread = children.find((c) => c.tagName === "messages");
-    const threadChildren = thread?.getChildren() || [];
-    return threadChildren.filter((el) => el.tagName === "message");
-}
-function* getParticipantNames(document) {
-    const children = document.root.getChildren() || [];
-    const memberNode = children.find((c) => c.tagName === "members");
-    const members = memberNode?.getChildren() || [];
-    for (const member of members) {
-        const name = getParticipantName(member);
-        if (name) {
-            yield name;
-        }
-    }
-}
-function* getOnlineParticipants(roomParticipants, participantNames) {
-    for (const participantName of participantNames) {
-        for (const remoteParticipant of roomParticipants) {
-            if (getParticipantName(remoteParticipant) === participantName) {
-                yield remoteParticipant;
-            }
-        }
-    }
-}
-const chunkSize = 64 * 1024; // 64 KB
-function fileToAsyncIterable(file) {
-    const hasNativeStream = typeof file.stream === 'function';
-    async function* nativeStream() {
-        const reader = file.stream().getReader();
-        try {
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done)
-                    break;
-                yield value;
-            }
-        }
-        finally {
-            reader.releaseLock();
-        }
-    }
-    async function* sliceStream() {
-        let offset = 0;
-        while (offset < file.size) {
-            const blob = file.slice(offset, offset + chunkSize);
-            const buffer = await blob.arrayBuffer();
-            yield new Uint8Array(buffer);
-            offset += chunkSize;
-        }
-    }
-    return (hasNativeStream ? nativeStream : sliceStream)();
-}
-function useChat({ room, path, participants, participantNames, initialMessage, includeLocalParticipant }) {
-    const { document, schemaFileExists } = (0, document_connection_scope_2.useDocumentConnection)({
-        room,
-        path,
-        onConnected: (doc) => {
-            ensureParticipants(doc, room.localParticipant, includeLocalParticipant ?? true, participants ?? [], participantNames ?? []);
-            if (initialMessage) {
-                sendMessage(initialMessage);
-            }
-        },
-        onError: (error) => {
-            console.error("Failed to connect to document:", error);
-        }
-    });
-    const [messages, setMessages] = (0, react_1.useState)(() => document ? mapMessages(document) : []);
-    const [attachments, setAttachments] = (0, react_1.useState)([]);
-    const [documentMembers, setDocumentMembers] = (0, react_1.useState)(() => document ? getParticipantNames(document) : []);
-    (0, document_connection_scope_2.useDocumentChanged)({
-        document,
-        onChanged: (doc) => {
-            setMessages(mapMessages(doc));
-            setDocumentMembers(getParticipantNames(doc));
-        },
-    });
-    const selectAttachments = (0, react_1.useCallback)((files) => {
-        const attachmentsToUpload = files.map((file) => new file_upload_1.MeshagentFileUpload(room, `uploaded-files/${file.name}`, fileToAsyncIterable(file), file.size));
-        setAttachments(attachmentsToUpload);
-    }, [room]);
-    const roomParticipants = (0, document_connection_scope_1.useRoomParticipants)(room);
-    const onlineParticipants = (0, react_1.useMemo)(() => Array.from(getOnlineParticipants(roomParticipants, documentMembers)), [roomParticipants, documentMembers]);
-    const sendMessage = (0, react_1.useCallback)((message) => {
-        const children = document?.root.getChildren() || [];
-        const thread = children.find((c) => c.tagName === "messages");
-        if (!thread) {
-            return;
-        }
-        const m = thread.createChildElement("message", {
-            id: message.id,
-            text: message.text,
-            created_at: new Date().toISOString(),
-            author_name: getParticipantName(room.localParticipant) ?? "",
-            author_ref: null,
-        });
-        for (const path of message.attachments) {
-            m.createChildElement("file", { path });
-        }
-        for (const participant of onlineParticipants) {
-            room.messaging.sendMessage({
-                to: participant,
-                type: "chat",
-                message: {
-                    path,
-                    text: message.text,
-                    attachments: message.attachments.map(path => ({ path })),
-                },
-            });
-        }
-    }, [document, path, attachments, onlineParticipants, room]);
-    const cancelRequest = (0, react_1.useCallback)(() => {
-        for (const participant of onlineParticipants) {
-            if (participant instanceof meshagent_1.RemoteParticipant && participant.role === 'agent') {
-                room.messaging.sendMessage({
-                    to: participant,
-                    type: "cancel",
-                    message: { path },
-                });
-            }
-        }
-    }, [room, path, onlineParticipants]);
-    return {
-        messages,
-        sendMessage,
-        selectAttachments,
-        attachments,
-        setAttachments,
-        schemaFileExists,
-        onlineParticipants,
-        cancelRequest,
-    };
-}

package/dist/cjs/file-upload.d.ts

@@ -1,43 +0,0 @@
-import { EventEmitter, RoomClient } from "@meshagent/meshagent";
-export declare enum UploadStatus {
-    Initial = "initial",
-    Uploading = "uploading",
-    Completed = "completed",
-    Failed = "failed"
-}
-interface UploadStatusEvent {
-    status: UploadStatus;
-    progress?: number;
-}
-export declare abstract class FileUpload extends EventEmitter<UploadStatusEvent> {
-    path: string;
-    size: number;
-    protected _status: UploadStatus;
-    protected constructor(path: string, size?: number);
-    get status(): UploadStatus;
-    protected set status(value: UploadStatus);
-    abstract get bytesUploaded(): number;
-    abstract get done(): Promise<void>;
-    get filename(): string;
-    abstract startUpload(): void;
-}
-export declare class MeshagentFileUpload extends FileUpload {
-    readonly room: RoomClient;
-    readonly dataStream: AsyncIterable<Uint8Array>;
-    private _bytesUploaded;
-    private _done;
-    private _resolveDone;
-    private _rejectDone;
-    private _downloadUrl;
-    private _resolveUrl;
-    private _rejectUrl;
-    constructor(room: RoomClient, path: string, dataStream: AsyncIterable<Uint8Array>, size?: number, autoStart?: boolean);
-    static deferred(room: RoomClient, path: string, dataStream: AsyncIterable<Uint8Array>, size?: number): MeshagentFileUpload;
-    get bytesUploaded(): number;
-    get done(): Promise<void>;
-    /** Resolves to the server’s public download URL – like Dart version. */
-    get downloadUrl(): Promise<URL>;
-    startUpload(): void;
-    private _upload;
-}
-export {};