@pmate/chat-sdk 0.11.3 → 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/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.3",
+  "version": "0.11.4",
   "description": "Cross-platform PMate chat input components, voice input primitives, and ASR helpers",
   "type": "module",
   "main": "./lib/index.js",
@@ -28,15 +28,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "clean": "rimraf lib",
-    "build": "pnpm run clean && tsc -p tsconfig.build.json && cp src/voice/recorder-processor.js lib/voice/recorder-processor.js",
-    "prepack": "pnpm run build",
-    "npm:publish": "pnpm run build && npm publish --access public --registry https://registry.npmjs.org/",
-    "test": "vitest run",
-    "storybook": "storybook dev -p 6009",
-    "build-storybook": "storybook build --output-dir dist"
-  },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
@@ -51,16 +42,24 @@
   "devDependencies": {
     "@storybook/addon-docs": "^9.0.17",
     "@storybook/react-vite": "9.0.17",
-    "@tailwindcss/vite": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
+    "@tailwindcss/vite": "^4.1.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "fake-indexeddb": "^6.2.5",
-    "react": "catalog:",
-    "react-dom": "catalog:",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rimraf": "^6.1.2",
     "storybook": "^9.0.17",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "^4.0.14",
     "typescript": "5.9.2",
     "vitest": "^4.0.17"
+  },
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "pnpm run clean && tsc -p tsconfig.build.json && cp src/voice/recorder-processor.js lib/voice/recorder-processor.js",
+    "npm:publish": "pnpm run build && npm publish --access public --registry https://registry.npmjs.org/",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6009",
+    "build-storybook": "storybook build --output-dir dist"
   }
-}
+}