@meshagent/meshagent-react 0.4.0

package/dist/cjs/file-upload.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MeshagentFileUpload = exports.FileUpload = exports.UploadStatus = void 0;
+const meshagent_1 = require("@meshagent/meshagent");
+var UploadStatus;
+(function (UploadStatus) {
+    UploadStatus["Initial"] = "initial";
+    UploadStatus["Uploading"] = "uploading";
+    UploadStatus["Completed"] = "completed";
+    UploadStatus["Failed"] = "failed";
+})(UploadStatus || (exports.UploadStatus = UploadStatus = {}));
+class FileUpload extends meshagent_1.EventEmitter {
+    constructor(path, size = 0) {
+        super();
+        Object.defineProperty(this, "path", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: path
+        });
+        Object.defineProperty(this, "size", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: size
+        });
+        Object.defineProperty(this, "_status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: UploadStatus.Initial
+        });
+    }
+    get status() {
+        return this._status;
+    }
+    set status(value) {
+        if (this._status !== value) {
+            this._status = value;
+            this.emit("status", {
+                status: value,
+                progress: this.bytesUploaded,
+            });
+        }
+    }
+    get filename() {
+        return this.path.split("/").pop() ?? "";
+    }
+}
+exports.FileUpload = FileUpload;
+class MeshagentFileUpload extends FileUpload {
+    constructor(room, path, dataStream, size = 0, autoStart = true) {
+        super(path, size);
+        Object.defineProperty(this, "room", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: room
+        });
+        Object.defineProperty(this, "dataStream", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: dataStream
+        });
+        Object.defineProperty(this, "_bytesUploaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "_done", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_resolveDone", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_rejectDone", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_downloadUrl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_resolveUrl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_rejectUrl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._done = new Promise((res, rej) => {
+            this._resolveDone = res;
+            this._rejectDone = rej;
+        });
+        this._downloadUrl = new Promise((res, rej) => {
+            this._resolveUrl = res;
+            this._rejectUrl = rej;
+        });
+        if (autoStart)
+            this._upload();
+    }
+    static deferred(room, path, dataStream, size = 0) {
+        return new MeshagentFileUpload(room, path, dataStream, size, false);
+    }
+    get bytesUploaded() {
+        return this._bytesUploaded;
+    }
+    get done() {
+        return this._done;
+    }
+    /** Resolves to the server’s public download URL – like Dart version. */
+    get downloadUrl() {
+        return this._downloadUrl;
+    }
+    startUpload() {
+        this._upload(); // idempotent guard inside _upload()
+    }
+    async _upload() {
+        if (this.status !== UploadStatus.Initial) {
+            throw new Error("upload already started or completed");
+        }
+        try {
+            const handle = await this.room.storage.open(this.path, { overwrite: true });
+            try {
+                this.status = UploadStatus.Uploading;
+                for await (const chunk of this.dataStream) {
+                    await this.room.storage.write(handle, chunk);
+                    this._bytesUploaded += chunk.length;
+                    this.emit("progress", {
+                        status: UploadStatus.Uploading,
+                        progress: this.bytesUploaded / this.size,
+                    });
+                }
+            }
+            finally {
+                await this.room.storage.close(handle);
+            }
+            this._resolveDone();
+            this.status = UploadStatus.Completed;
+            const urlStr = await this.room.storage.downloadUrl(this.path);
+            this._resolveUrl(new URL(urlStr));
+        }
+        catch (err) {
+            this.status = UploadStatus.Failed;
+            this._rejectDone(err);
+            this._rejectUrl(err);
+        }
+    }
+}
+exports.MeshagentFileUpload = MeshagentFileUpload;

package/dist/cjs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './chat';
+export * from './client-toolkits';
+export * from './document-connection-scope';
+export * from './file-upload';
+export * from './room-connection-scope';

package/dist/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./chat"), exports);
+__exportStar(require("./client-toolkits"), exports);
+__exportStar(require("./document-connection-scope"), exports);
+__exportStar(require("./file-upload"), exports);
+__exportStar(require("./room-connection-scope"), exports);

package/dist/cjs/room-connection-scope.d.ts

@@ -0,0 +1,47 @@
+import { RoomClient } from '@meshagent/meshagent';
+export interface RoomConnectionInfo {
+    url: string;
+    jwt: string;
+}
+export declare const developmentAuthorization: ({ url, projectId, apiKeyId, participantName, roomName, secret, }: {
+    url: string;
+    projectId: string;
+    apiKeyId: string;
+    participantName: string;
+    roomName: string;
+    secret: string;
+}) => (() => Promise<RoomConnectionInfo>);
+export declare const staticAuthorization: ({ url, jwt, }: {
+    url: string;
+    jwt: string;
+}) => (() => Promise<RoomConnectionInfo>);
+export interface UseRoomConnectionOptions {
+    /** Async function that returns `{ url, jwt }` for the room. */
+    authorization: () => Promise<{
+        url: string;
+        jwt: string;
+    }>;
+    /** Enable the optional messaging layer (default = `true`). */
+    enableMessaging?: boolean;
+}
+/**
+ * Shape of the object returned by the hook.
+ */
+export interface UseRoomConnectionResult {
+    client: RoomClient | null;
+    state: 'authorizing' | 'connecting' | 'ready' | 'done';
+    ready: boolean;
+    done: boolean;
+    error: unknown;
+    dispose: () => void;
+}
+export declare function useRoomConnection(props: UseRoomConnectionOptions): UseRoomConnectionResult;
+export interface UseRoomIndicatorsResult {
+    typing: boolean;
+    thinking: boolean;
+}
+export interface UseRoomIndicatorsProps {
+    room: RoomClient | null;
+    path: string;
+}
+export declare function useRoomIndicators({ room, path }: UseRoomIndicatorsProps): UseRoomIndicatorsResult;

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

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.staticAuthorization = exports.developmentAuthorization = void 0;
+exports.useRoomConnection = useRoomConnection;
+exports.useRoomIndicators = useRoomIndicators;
+const react_1 = require("react");
+const subscribe_async_gen_1 = require("./subscribe-async-gen");
+const meshagent_1 = require("@meshagent/meshagent");
+const meshagent_2 = require("@meshagent/meshagent");
+/* -------------------------------------------------
+ * Authorization helpers
+ * ------------------------------------------------- */
+const developmentAuthorization = ({ url, projectId, apiKeyId, participantName, roomName, secret, }) => async () => {
+    const token = new meshagent_2.ParticipantToken({
+        name: participantName,
+        projectId,
+        apiKeyId,
+    });
+    token.addRoomGrant(roomName);
+    token.addRoleGrant('user');
+    const jwt = await token.toJwt({ token: secret });
+    return { url, jwt };
+};
+exports.developmentAuthorization = developmentAuthorization;
+const staticAuthorization = ({ url, jwt, }) => async () => ({ url, jwt });
+exports.staticAuthorization = staticAuthorization;
+function useRoomConnection(props) {
+    const { authorization, enableMessaging = true, } = props;
+    const [client, setClient] = (0, react_1.useState)(null);
+    const [ready, setReady] = (0, react_1.useState)(false);
+    const [state, setState] = (0, react_1.useState)('authorizing');
+    const [error, setError] = (0, react_1.useState)(null);
+    // Keep the latest client in a ref so we can call `dispose` in cleanup.
+    const clientRef = (0, react_1.useRef)(null);
+    clientRef.current = client;
+    // Instance method exposed to consumers (rarely needed).
+    const dispose = () => {
+        clientRef.current?.dispose();
+        setState('done');
+    };
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        const connect = async () => {
+            try {
+                // 1️⃣  Get connection credentials
+                const { url, jwt } = await authorization();
+                if (cancelled)
+                    return;
+                const room = new meshagent_2.RoomClient({
+                    protocol: new meshagent_2.Protocol({
+                        channel: new meshagent_2.WebSocketProtocolChannel({ url, 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) {
+                    await room.messaging.enable();
+                }
+                if (cancelled)
+                    return;
+                setState('ready');
+                setReady(true);
+            }
+            catch (e) {
+                if (cancelled)
+                    return;
+                setError(e);
+                setState('done');
+            }
+        };
+        connect();
+        return () => {
+            // React unmount or deps change → cancel & dispose
+            cancelled = true;
+            dispose();
+        };
+        // eslint‑disable‑next‑line react-hooks/exhaustive-deps
+    }, []); // run once, just like componentDidMount
+    return {
+        client,
+        state,
+        ready,
+        done: state === 'done',
+        error,
+        dispose,
+    };
+}
+function useRoomIndicators({ room, path }) {
+    const typingMap = (0, react_1.useRef)({});
+    const thinkingSet = (0, react_1.useRef)(new Set());
+    const [typing, setState] = (0, react_1.useState)(false);
+    const [thinking, setThinking] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!room)
+            return;
+        const s = (0, subscribe_async_gen_1.subscribe)(room.listen(), {
+            next: (event) => {
+                if (event instanceof meshagent_1.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];
+                            setState(Object.keys(typingMap.current).length > 0);
+                        }, 1000);
+                        // Update typing state
+                        setState(Object.keys(typingMap.current).length > 0);
+                    }
+                    else if (message.type === "thinking") {
+                        if (message.message.thinking) {
+                            thinkingSet.current.add(message.fromParticipantId);
+                        }
+                        else {
+                            thinkingSet.current.delete(message.fromParticipantId);
+                        }
+                        // Update thinking state
+                        setThinking(thinkingSet.current.size > 0);
+                    }
+                }
+            },
+        });
+        return () => s.unsubscribe();
+    }, [room, path]);
+    return { typing, thinking };
+}

package/dist/cjs/subscribe-async-gen.d.ts

@@ -0,0 +1,10 @@
+type Subscriber<T> = {
+    next: (value: T) => void;
+    error?: (err: unknown) => void;
+    complete?: () => void;
+};
+export interface Subscription {
+    unsubscribe: () => void;
+}
+export declare function subscribe<T>(iterable: AsyncIterable<T>, { next, error, complete }: Subscriber<T>): Subscription;
+export {};

package/dist/cjs/subscribe-async-gen.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribe = subscribe;
+function abortableNext(iterator, signal) {
+    const nextP = iterator.next();
+    const abortP = new Promise((_, rej) => {
+        signal.addEventListener("abort", () => rej(new Error("aborted")), { once: true });
+    });
+    return Promise.race([nextP, abortP]);
+}
+function subscribe(iterable, { next, error, complete }) {
+    const controller = new AbortController();
+    const it = iterable[Symbol.asyncIterator]();
+    (async () => {
+        try {
+            while (!controller.signal.aborted) {
+                const { value, done } = await abortableNext(it, controller.signal);
+                if (done)
+                    break;
+                next(value);
+            }
+            if (!controller.signal.aborted && complete) {
+                complete();
+            }
+        }
+        catch (err) {
+            if (!controller.signal.aborted && error) {
+                error(err);
+            }
+        }
+    })();
+    return {
+        unsubscribe: () => controller.abort(),
+    };
+}

package/dist/esm/chat.d.ts

@@ -0,0 +1,29 @@
+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[];
+}
+export declare function fileToAsyncIterable(file: File): AsyncIterable<Uint8Array>;
+export declare function useChat({ room, path, participants, participantNames, initialMessage, includeLocalParticipant }: UseMessageChatProps): UseMessageChatResult;

package/dist/esm/chat.js

@@ -0,0 +1,172 @@
+import { useCallback, useState, useEffect } from "react";
+import { MeshagentFileUpload } from "./file-upload";
+import { useDocumentConnection, useDocumentChanged, } from "./document-connection-scope";
+export 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 ?? [];
+    }
+}
+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.tagName !== undefined)) {
+        if (child.tagName === "members") {
+            for (const member of child.getChildren()
+                .filter((c) => c.tagName !== undefined)) {
+                const name = member.getAttribute("name");
+                if (name)
+                    existing.add(name);
+            }
+            for (const part of retParticipants) {
+                const name = part.getAttribute("name");
+                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 = member.getAttribute("name");
+        if (name) {
+            yield name;
+        }
+    }
+}
+function* getOnlineParticipants(room, document) {
+    for (const participantName of getParticipantNames(document)) {
+        if (participantName === room.localParticipant?.getAttribute("name")) {
+            yield room.localParticipant;
+        }
+        for (const remoteParticipant of room.messaging.remoteParticipants) {
+            if (remoteParticipant.getAttribute("name") === participantName) {
+                yield remoteParticipant;
+            }
+        }
+    }
+}
+const chunkSize = 64 * 1024; // 64 KB
+export 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)();
+}
+export function useChat({ room, path, participants, participantNames, initialMessage, includeLocalParticipant }) {
+    const { document } = useDocumentConnection({ room, path });
+    const [messages, setMessages] = useState(() => document ? mapMessages(document) : []);
+    const [attachments, setAttachments] = useState([]);
+    useDocumentChanged({
+        document,
+        onChanged: (doc) => {
+            setMessages(mapMessages(doc));
+        },
+    });
+    const selectAttachments = useCallback((files) => {
+        const attachmentsToUpload = files.map((file) => new MeshagentFileUpload(room, `uploaded-files/${file.name}`, fileToAsyncIterable(file), file.size));
+        setAttachments(attachmentsToUpload);
+    }, [room, document]);
+    const sendMessage = useCallback((message) => {
+        const children = document?.root.getChildren() || [];
+        const thread = children.find((c) => c.tagName === "messages");
+        if (!thread) {
+            return;
+        }
+        thread.createChildElement("message", {
+            id: message.id,
+            text: message.text,
+            created_at: new Date().toISOString(),
+            author_name: room.localParticipant.getAttribute("name"),
+            author_ref: null,
+        });
+        for (const participant of getOnlineParticipants(room, document)) {
+            room.messaging.sendMessage({
+                to: participant,
+                type: "chat",
+                message: {
+                    path,
+                    text: message.text,
+                    attachments: message.attachments,
+                },
+            });
+        }
+    }, [document]);
+    useEffect(() => {
+        if (document) {
+            ensureParticipants(document, room.localParticipant, includeLocalParticipant ?? true, participants ?? [], participantNames ?? []);
+            if (initialMessage) {
+                sendMessage(initialMessage);
+            }
+        }
+    }, [document]);
+    return {
+        messages,
+        sendMessage,
+        selectAttachments,
+        attachments,
+    };
+}

package/dist/esm/client-toolkits.d.ts

@@ -0,0 +1,7 @@
+import { RemoteToolkit } from '@meshagent/meshagent';
+interface ClientToolkitsProps {
+    toolkits: RemoteToolkit[];
+    public?: boolean;
+}
+export declare const useClientToolkits: ({ toolkits, public: isPublic, }: ClientToolkitsProps) => void;
+export {};

package/dist/esm/client-toolkits.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+export const useClientToolkits = ({ toolkits, public: isPublic = false, }) => {
+    useEffect(() => {
+        toolkits.forEach(toolkit => toolkit.start({ public_: isPublic }));
+        return () => toolkits.forEach(toolkit => toolkit.stop());
+    }, []);
+};

package/dist/esm/document-connection-scope.d.ts

@@ -0,0 +1,26 @@
+import { MeshDocument, RoomClient } from '@meshagent/meshagent';
+export interface UseDocumentConnectionProps {
+    room: RoomClient;
+    path: string;
+}
+export interface UseDocumentConnectionResult {
+    document: MeshDocument | null;
+    error: unknown;
+    loading: boolean;
+}
+/**
+ * Connects to a Mesh document inside an existing RoomClient and keeps it in sync.
+ *
+ * The function retries with an exponential back‑off (capped at 60 s) until the
+ * document becomes available or the component unmounts.
+ *
+ * @param room  An already‑connected RoomClient.
+ * @param path  Path to the document inside the room.
+ */
+export declare function useDocumentConnection({ room, path }: UseDocumentConnectionProps): UseDocumentConnectionResult;
+type onChangedHandler = (document: MeshDocument) => void;
+export declare function useDocumentChanged({ document, onChanged }: {
+    document: MeshDocument | null;
+    onChanged: onChangedHandler;
+}): void;
+export {};