@pmate/chat-sdk 0.11.2 → 0.11.4

package/README.md

@@ -106,3 +106,24 @@ await meetingClient.join(groupId, teamId, invitedProfileIds)
 All commands for an established call/meeting carry its stored Team. Foreign-Team responses are ignored, and a mismatched join acknowledgment releases capture. Hub reach call events require Team context and are checked against the authoritative attach response before showing incoming UI. A native call ID can still be attached directly: the server supplies its authoritative Team.
 
 This is a protocol-breaking minor release for the pre-1.0 SDK. It requires the Team-scoped call-api and updated notification consumers; coordinate deployment with the application's migration rollout. It does not migrate legacy meeting/group history itself.
+
+## Clipboard images in custom composers
+
+### Background
+
+Applications with their own input UI need the same screenshot paste behavior as the SDK inputs. `handleImagePaste` reads the user's paste event without requesting clipboard access; it does not fetch HTML image URLs.
+
+```tsx
+<textarea onPaste={event => handleImagePaste(event, {
+  disabled,
+  onImages: files => { void uploadImages(files).catch(showUploadError) },
+})} />
+```
+
+The handler leaves text-only pastes and events already handled by the host untouched. Image items take precedence over text/HTML; `clipboardData.files` is used when no readable image items exist. The host owns size/type validation, upload progress, error feedback and whether to preview or send the image. Both SDK inputs use this interface. Multiple attachments are appended without overwriting earlier selections.
+
+### Draft preview and upload
+
+`useImageAttachments({ uploadImage, disabled })` provides `onPaste`, `addFiles`, `attachments`, `pending`, `remove` and `retry`. Render `ImageAttachmentTray` inside the composer's surface with these attachments and the input tokens. Local previews appear immediately; uploads happen in the background. Removal/unmount revokes local object URLs, and late upload results cannot reinsert removed drafts. Upload errors remain visible and retryable.
+
+Only send on explicit submission: block send while `pending`, deliver each ready attachment's `url`, and remove it after delivery succeeds. Keep unsuccessful drafts to allow retry without reuploading. For `ChatInputDesktop`, use `hasPendingContent` and `sendDisabled` with host-owned drafts. Unmount or key the draft owner when switching accounts, Teams or conversations.

package/lib/components/ChatInputDesktop.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { handleImagePaste } from "../ux/imagePaste";
 import { useMentions } from "../hooks/useMentions";
 import { MentionMenu } from "./MentionMenu";
 import React from "react";
@@ -66,21 +67,26 @@ function DesktopInner(props) {
                             ? "Transcript inserted. Edit or send."
                             : undefined));
     const onSend = async () => {
-        if (!props.onSend) {
+        if (!props.onSend || props.disabled || props.sendDisabled || isUploadingImage || state.status === "sending") {
             return;
         }
         state.setStatus("sending");
-        await props.onSend({
-            text: state.text,
-            mentions: mentions.getMentions(),
-            attachments: state.attachments,
-            transcript: state.transcript || undefined,
-        });
-        state.setText("");
-        state.setTranscript("");
-        state.setAttachments([]);
-        props.onChange?.("");
-        state.setStatus("idle");
+        state.setError(null);
+        try {
+            await props.onSend({
+                text: state.text, mentions: mentions.getMentions(), attachments: state.attachments,
+                transcript: state.transcript || undefined,
+            });
+            state.setText("");
+            state.setTranscript("");
+            state.setAttachments([]);
+            props.onChange?.("");
+            state.setStatus("idle");
+        }
+        catch (error) {
+            state.setError(error instanceof Error ? error.message : "Failed to send message");
+            state.setStatus("error");
+        }
     };
     const handleImageFile = async (file) => {
         if (!props.image?.uploadImage) {
@@ -119,16 +125,11 @@ function DesktopInner(props) {
     };
     const handlePaste = (event) => {
         props.onPaste?.(event);
-        if (event.defaultPrevented || props.enableImage === false)
-            return;
-        const images = [...event.clipboardData.items]
-            .filter((item) => item.kind === "file" && item.type.startsWith("image/"))
-            .flatMap((item) => item.getAsFile() ? [item.getAsFile()] : []);
-        if (!images.length)
-            return;
-        event.preventDefault();
-        for (const image of images)
-            void handleImageFile(image);
+        handleImagePaste(event, {
+            disabled: props.disabled || props.enableImage === false || state.status === "sending",
+            onImages: images => { for (const image of images)
+                void handleImageFile(image); },
+        });
     };
     const insertEmoji = (emoji) => {
         const textarea = textComposerRef.current;
@@ -229,7 +230,7 @@ function DesktopInner(props) {
                                         event.keyCode === 229)
                                         return;
                                     event.preventDefault();
-                                    if (state.text.trim() || state.attachments.length > 0)
+                                    if (state.text.trim() || state.attachments.length > 0 || props.hasPendingContent)
                                         void onSend();
                                 }, style: {
                                     flex: 1,
@@ -254,7 +255,7 @@ function DesktopInner(props) {
                                                     color: voice.status === "recording" || voice.status === "transcribing" ? tokens.color.iconActive : tokens.color.iconDefault,
                                                     cursor: props.disabled || props.enableVoice === false ? "not-allowed" : "pointer",
                                                     opacity: props.disabled || props.enableVoice === false ? 0.4 : 1,
-                                                }, "aria-label": voice.status === "recording" ? "停止录音并转文字" : voice.status === "transcribing" ? "正在转写语音" : "开始语音输入", children: voice.status === "recording" ? _jsx(StopCircleOutlineIcon, { size: tokens.sizing.desktopIcon }) : _jsx(MicOutlineIcon, { size: tokens.sizing.desktopIcon, strokeWidth: 2 }) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": tokens.sizing.desktopIcon, style: sideActionStyle, onClick: () => { setIsMoreOpen(false); setIsEmojiOpen((prev) => !prev); } }), _jsx(SendAction, { tokens: tokens, disabled: props.disabled || state.status === "sending" || (!state.text.trim() && state.attachments.length === 0), "aria-label": "\u53D1\u9001\u6D88\u606F", onClick: () => void onSend(), style: { width: tokens.sizing.desktopSendAction, height: tokens.sizing.desktopSendAction, padding: 0, borderRadius: 999, fontSize: tokens.sizing.desktopSendIcon, lineHeight: `${tokens.sizing.desktopSendAction}px` }, children: "\u2191" })] })] })] })) : _jsxs("div", { style: {
+                                                }, "aria-label": voice.status === "recording" ? "停止录音并转文字" : voice.status === "transcribing" ? "正在转写语音" : "开始语音输入", children: voice.status === "recording" ? _jsx(StopCircleOutlineIcon, { size: tokens.sizing.desktopIcon }) : _jsx(MicOutlineIcon, { size: tokens.sizing.desktopIcon, strokeWidth: 2 }) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": tokens.sizing.desktopIcon, style: sideActionStyle, onClick: () => { setIsMoreOpen(false); setIsEmojiOpen((prev) => !prev); } }), _jsx(SendAction, { tokens: tokens, disabled: props.disabled || props.sendDisabled || isUploadingImage || state.status === "sending" || (!state.text.trim() && state.attachments.length === 0 && !props.hasPendingContent), "aria-label": "\u53D1\u9001\u6D88\u606F", onClick: () => void onSend(), style: { width: tokens.sizing.desktopSendAction, height: tokens.sizing.desktopSendAction, padding: 0, borderRadius: 999, fontSize: tokens.sizing.desktopSendIcon, lineHeight: `${tokens.sizing.desktopSendAction}px` }, children: "\u2191" })] })] })] })) : _jsxs("div", { style: {
                             display: "grid",
                             gridTemplateColumns: "32px minmax(0, 1fr) 32px 32px",
                             alignItems: "center",
@@ -300,7 +301,7 @@ function DesktopInner(props) {
                                         const shouldSend = props.submitShortcut === "meta-enter" ? event.metaKey || event.ctrlKey : !event.shiftKey;
                                         if (shouldSend) {
                                             event.preventDefault();
-                                            if (state.text.trim() || state.attachments.length > 0) {
+                                            if (state.text.trim() || state.attachments.length > 0 || props.hasPendingContent) {
                                                 void onSend();
                                             }
                                         }

package/lib/components/ChatInputMobile.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { handleImagePaste } from "../ux/imagePaste";
 import { useMentions } from "../hooks/useMentions";
 import { MentionMenu } from "./MentionMenu";
 import React from "react";
@@ -123,16 +124,11 @@ function MobileInner(props) {
     };
     const handlePaste = (event) => {
         props.onPaste?.(event);
-        if (event.defaultPrevented || props.enableImage === false)
-            return;
-        const images = [...event.clipboardData.items]
-            .filter((item) => item.kind === "file" && item.type.startsWith("image/"))
-            .flatMap((item) => item.getAsFile() ? [item.getAsFile()] : []);
-        if (!images.length)
-            return;
-        event.preventDefault();
-        for (const image of images)
-            void handleImageFile(image);
+        handleImagePaste(event, {
+            disabled: props.disabled || props.enableImage === false || state.status === "sending",
+            onImages: images => { for (const image of images)
+                void handleImageFile(image); },
+        });
     };
     const isRecordingOverlayVisible = state.status === "recording" || state.status === "transcribing";
     const isTranscriptConfirmVisible = state.status === "transcript-ready" && Boolean(state.transcript);

package/lib/components/ImageAttachmentTray.d.ts

@@ -0,0 +1,11 @@
+import type { ImageDraftAttachment } from "../hooks/useImageAttachments";
+import type { ChatInputTokens } from "../types/chatInput";
+/** Shared inline draft UI for host-owned inputs. Uses the same tokens as SDK composers. */
+export declare function ImageAttachmentTray({ attachments, tokens, onRemove, onRetry, disabled, locale }: {
+    attachments: ImageDraftAttachment[];
+    tokens: ChatInputTokens;
+    onRemove: (id: string) => void;
+    onRetry: (id: string) => void;
+    disabled?: boolean;
+    locale?: "en" | "zh";
+}): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/ImageAttachmentTray.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+/** Shared inline draft UI for host-owned inputs. Uses the same tokens as SDK composers. */
+export function ImageAttachmentTray({ attachments, tokens, onRemove, onRetry, disabled, locale = "en" }) {
+    if (!attachments.length)
+        return null;
+    return _jsx("div", { "aria-label": locale === "zh" ? "待发送图片" : "Image drafts", style: { display: "flex", flexWrap: "wrap", gap: 10, padding: 12, minWidth: 0 }, children: attachments.map(item => _jsxs("div", { style: { position: "relative", width: 112, maxWidth: "100%", borderRadius: 12,
+                border: `1px solid ${item.status === "error" ? tokens.color.statusError : tokens.color.borderDefault}`, overflow: "hidden", background: tokens.color.surfaceInputDefault }, children: [_jsx("img", { src: item.previewUrl, alt: item.name, style: { display: "block", width: "100%", height: 96, objectFit: "contain" } }), _jsx("button", { type: "button", disabled: disabled, "aria-label": `${locale === "zh" ? "移除" : "Remove"} ${item.name}`, onClick: () => onRemove(item.id), style: { position: "absolute", top: 4, right: 4, width: 24, height: 24, borderRadius: 99, border: 0, background: tokens.color.surfaceInputFocus, color: tokens.color.textPrimary, cursor: "pointer" }, children: "\u00D7" }), item.status === "uploading" ? _jsx("div", { role: "status", style: { fontSize: 12, padding: 6, color: tokens.color.textSecondary }, children: locale === "zh" ? "正在上传…" : "Uploading…" }) : null, item.status === "error" ? _jsxs("div", { style: { fontSize: 12, padding: 6, overflowWrap: "anywhere", color: tokens.color.statusError }, children: [_jsx("span", { role: "alert", children: item.error }), _jsx("button", { type: "button", disabled: disabled, onClick: () => onRetry(item.id), style: { display: "block", marginTop: 4, cursor: "pointer" }, children: locale === "zh" ? "重试上传" : "Retry upload" })] }) : null] }, item.id)) });
+}

package/lib/hooks/useAttachmentState.js

@@ -4,8 +4,8 @@ export function useAttachmentState() {
     return {
         attachments,
         addAttachment(attachment) {
-            setAttachments([
-                ...attachments,
+            setAttachments(current => [
+                ...current,
                 {
                     id: crypto.randomUUID(),
                     kind: "image",
@@ -15,7 +15,7 @@ export function useAttachmentState() {
             setStatus("attachment-selected");
         },
         removeAttachment(id) {
-            setAttachments(attachments.filter((item) => item.id !== id));
+            setAttachments(current => current.filter((item) => item.id !== id));
         },
     };
 }

package/lib/hooks/useImageAttachments.d.ts

@@ -0,0 +1,19 @@
+import type { ClipboardEventHandler } from "react";
+import type { ChatAttachment } from "../types/attachment";
+import type { ChatImageUploadResult } from "../types/chatInput";
+export type ImageDraftAttachment = ChatAttachment & {
+    status: "uploading" | "ready" | "error";
+    error?: string;
+};
+/** Local previews appear immediately. Uploading never sends a chat message. */
+export declare function useImageAttachments(options: {
+    uploadImage?: (file: File) => Promise<ChatImageUploadResult>;
+    disabled?: boolean;
+}): {
+    attachments: ImageDraftAttachment[];
+    addFiles: (files: File[]) => void;
+    onPaste: ClipboardEventHandler<HTMLTextAreaElement>;
+    pending: boolean;
+    remove(id: string): void;
+    retry(id: string): void;
+};

package/lib/hooks/useImageAttachments.js

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from "react";
+import { handleImagePaste } from "../ux/imagePaste";
+/** Local previews appear immediately. Uploading never sends a chat message. */
+export function useImageAttachments(options) {
+    const [attachments, setAttachments] = useState([]);
+    const entries = useRef(new Map());
+    const active = useRef(true);
+    const sync = () => { if (active.current)
+        setAttachments([...entries.current.values()]); };
+    useEffect(() => {
+        active.current = true;
+        return () => {
+            active.current = false;
+            for (const item of entries.current.values())
+                if (item.previewUrl)
+                    URL.revokeObjectURL(item.previewUrl);
+            entries.current.clear();
+        };
+    }, []);
+    async function upload(item) {
+        item.status = "uploading";
+        item.error = undefined;
+        sync();
+        try {
+            const result = options.uploadImage ? await options.uploadImage(item.file) : undefined;
+            if (entries.current.get(item.id) !== item)
+                return;
+            item.url = result?.url;
+            item.status = "ready";
+        }
+        catch (error) {
+            if (entries.current.get(item.id) !== item)
+                return;
+            item.status = "error";
+            item.error = error instanceof Error ? error.message : "Image upload failed";
+        }
+        sync();
+    }
+    function addFiles(files) {
+        if (options.disabled)
+            return;
+        for (const file of files) {
+            const item = { id: crypto.randomUUID(), kind: "image", name: file.name,
+                file, previewUrl: URL.createObjectURL(file), status: "uploading" };
+            entries.current.set(item.id, item);
+            void upload(item);
+        }
+    }
+    const onPaste = event => {
+        handleImagePaste(event, { disabled: options.disabled, onImages: addFiles });
+    };
+    return {
+        attachments, addFiles, onPaste,
+        pending: attachments.some(item => item.status !== "ready"),
+        remove(id) {
+            const item = entries.current.get(id);
+            if (item?.previewUrl)
+                URL.revokeObjectURL(item.previewUrl);
+            entries.current.delete(id);
+            sync();
+        },
+        retry(id) {
+            const item = entries.current.get(id);
+            if (!options.disabled && item?.status === "error")
+                void upload(item);
+        },
+    };
+}

package/lib/index.d.ts

@@ -38,3 +38,6 @@ export * from "./runtime/meeting";
 export * from "./runtime/teamScope";
 export * from "./runtime/teamMigrations";
 export * from "./runtime/socialReadClient";
+export * from "./ux/imagePaste";
+export * from "./hooks/useImageAttachments";
+export * from "./components/ImageAttachmentTray";

package/lib/index.js

@@ -38,3 +38,6 @@ export * from "./runtime/meeting";
 export * from "./runtime/teamScope";
 export * from "./runtime/teamMigrations";
 export * from "./runtime/socialReadClient";
+export * from "./ux/imagePaste";
+export * from "./hooks/useImageAttachments";
+export * from "./components/ImageAttachmentTray";

package/lib/runtime/readIndex.d.ts

@@ -84,8 +84,13 @@ export interface ReadIndexPersistence {
 }
 /** IndexedDB transactions serialize tabs, and retain offline outbox across process restarts. */
 export declare class IndexedDbReadIndex implements ReadIndexPersistence {
-    private readonly database;
+    private factory;
+    private name;
+    private database?;
+    private closed;
     constructor(factory?: IDBFactory, name?: string);
+    private getDatabase;
+    private transaction;
     load(appId: string, profileId: string): Promise<ReadIndexState | undefined>;
     update(appId: string, profileId: string, transform: (current: ReadIndexState) => ReadIndexState): Promise<ReadIndexState>;
     close(): Promise<void>;

package/lib/runtime/readIndex.js

@@ -164,32 +164,80 @@ export function unreadInThread(state, threadId) {
 }
 /** IndexedDB transactions serialize tabs, and retain offline outbox across process restarts. */
 export class IndexedDbReadIndex {
+    factory;
+    name;
     database;
+    closed = false;
     constructor(factory = globalThis.indexedDB, name = "pmate-social-read-index") {
+        this.factory = factory;
+        this.name = name;
         if (!factory)
             throw new Error("READ_STORAGE_UNAVAILABLE");
-        this.database = new Promise((resolve, reject) => {
-            const request = factory.open(name, 1);
-            request.onupgradeneeded = () => { request.result.createObjectStore("profiles"); };
-            request.onsuccess = () => { request.result.onversionchange = () => request.result.close(); resolve(request.result); };
-            request.onerror = () => reject(request.error);
-            request.onblocked = () => reject(new Error("READ_STORAGE_BLOCKED"));
+    }
+    getDatabase() {
+        if (this.closed)
+            return Promise.reject(new Error("READ_STORAGE_CLOSED"));
+        if (this.database)
+            return this.database;
+        let abandoned = false;
+        const pending = new Promise((resolve, reject) => {
+            const request = this.factory.open(this.name);
+            request.onupgradeneeded = () => { if (!request.result.objectStoreNames.contains("profiles"))
+                request.result.createObjectStore("profiles"); };
+            request.onsuccess = () => {
+                const db = request.result;
+                if (abandoned || this.closed) {
+                    db.close();
+                    reject(new Error("READ_STORAGE_CLOSED"));
+                    return;
+                }
+                const invalidate = () => { if (this.database === pending)
+                    this.database = undefined; };
+                db.onversionchange = () => { db.close(); invalidate(); };
+                db.onclose = invalidate;
+                resolve(db);
+            };
+            request.onerror = () => { abandoned = true; reject(request.error); };
+            request.onblocked = () => { abandoned = true; reject(new Error("READ_STORAGE_BLOCKED")); };
         });
+        this.database = pending;
+        void pending.catch(() => { if (this.database === pending)
+            this.database = undefined; });
+        return pending;
+    }
+    async transaction(mode, execute) {
+        for (let attempt = 0; attempt < 2; attempt++) {
+            const pending = this.getDatabase(), db = await pending;
+            if (this.closed)
+                throw new Error("READ_STORAGE_CLOSED");
+            let transaction;
+            try {
+                transaction = db.transaction("profiles", mode);
+            }
+            catch (error) {
+                if (attempt || error?.name !== "InvalidStateError")
+                    throw error;
+                // Retry only transaction creation: no transform or write has run yet.
+                db.close();
+                if (this.database === pending)
+                    this.database = undefined;
+                continue;
+            }
+            // Start requests synchronously after creation, including on WebKit.
+            return execute(transaction);
+        }
+        throw new Error("READ_STORAGE_UNAVAILABLE");
     }
     async load(appId, profileId) {
-        const database = await this.database;
-        return new Promise((resolve, reject) => {
-            const transaction = database.transaction("profiles", "readonly");
+        return this.transaction("readonly", transaction => new Promise((resolve, reject) => {
             const request = transaction.objectStore("profiles").get([appId, profileId]);
             transaction.oncomplete = () => resolve(request.result);
             transaction.onerror = () => reject(transaction.error);
             transaction.onabort = () => reject(transaction.error ?? new Error("READ_STORAGE_ABORTED"));
-        });
+        }));
     }
     async update(appId, profileId, transform) {
-        const database = await this.database;
-        return new Promise((resolve, reject) => {
-            const transaction = database.transaction("profiles", "readwrite");
+        return this.transaction("readwrite", transaction => new Promise((resolve, reject) => {
             const store = transaction.objectStore("profiles");
             const request = store.get([appId, profileId]);
             let next, failure;
@@ -208,9 +256,13 @@ export class IndexedDbReadIndex {
             transaction.oncomplete = () => resolve(next);
             transaction.onerror = () => reject(failure ?? transaction.error);
             transaction.onabort = () => reject(failure ?? transaction.error ?? new Error("READ_STORAGE_ABORTED"));
-        });
+        }));
     }
-    async close() { (await this.database).close(); }
+    async close() { this.closed = true; const pending = this.database; this.database = undefined; if (pending) {
+        const db = await pending.catch(error => { if (error?.message !== "READ_STORAGE_CLOSED")
+            throw error; return undefined; });
+        db?.close();
+    } }
 }
 export function sourcesInConversation(state, conversationId) {
     return state.threads.filter(thread => (thread.conversationId ?? thread.id) === conversationId);

package/lib/types/chatInput.d.ts

@@ -140,6 +140,10 @@ export type ChatInputBaseProps = {
         audio?: Blob;
         mode?: "text" | "voice";
     }) => Promise<void> | void;
+    /** Host-owned drafts can enable sending even when the SDK text/attachment list is empty. */
+    hasPendingContent?: boolean;
+    /** Blocks submission while host-owned drafts are uploading or invalid. */
+    sendDisabled?: boolean;
     enableVoice?: boolean;
     enableEmoji?: boolean;
     enableImage?: boolean;

package/lib/ux/imagePaste.d.ts

@@ -0,0 +1,13 @@
+/** Clipboard image handling for SDK inputs and host-owned composers. No clipboard permission request. */
+export type ImagePasteEvent = {
+    clipboardData: Pick<DataTransfer, "items" | "files"> | null;
+    defaultPrevented: boolean;
+    preventDefault(): void;
+};
+/** Prefer items; files is used when the browser exposes no readable image items. */
+export declare function getClipboardImages(data: ImagePasteEvent["clipboardData"]): File[];
+/** Consumes image pastes only. The host owns validation, upload, progress and errors. */
+export declare function handleImagePaste(event: ImagePasteEvent, options: {
+    disabled?: boolean;
+    onImages: (files: File[]) => void;
+}): boolean;

package/lib/ux/imagePaste.js

@@ -0,0 +1,23 @@
+/** Prefer items; files is used when the browser exposes no readable image items. */
+export function getClipboardImages(data) {
+    if (!data)
+        return [];
+    const images = Array.from(data.items).flatMap(item => {
+        if (item.kind !== "file" || !item.type.startsWith("image/"))
+            return [];
+        const file = item.getAsFile();
+        return file ? [file] : [];
+    });
+    return images.length ? images : Array.from(data.files).filter(file => file.type.startsWith("image/"));
+}
+/** Consumes image pastes only. The host owns validation, upload, progress and errors. */
+export function handleImagePaste(event, options) {
+    if (event.defaultPrevented || options.disabled)
+        return false;
+    const images = getClipboardImages(event.clipboardData);
+    if (!images.length)
+        return false;
+    event.preventDefault();
+    options.onImages(images);
+    return true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmate/chat-sdk",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "description": "Cross-platform PMate chat input components, voice input primitives, and ASR helpers",
   "type": "module",
   "main": "./lib/index.js",