@pmate/chat-sdk 0.1.12 → 0.1.14

package/lib/components/ChatInputMobile.js

@@ -27,6 +27,7 @@ function MobileInner(props) {
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
     const [isMoreOpen, setIsMoreOpen] = useState(false);
     const [isUploadingImage, setIsUploadingImage] = useState(false);
+    const [transcriptDraft, setTranscriptDraft] = useState("");
     const cancelZoneRef = useRef(null);
     const transcribeZoneRef = useRef(null);
     const textComposerRef = useRef(null);
@@ -35,6 +36,7 @@ function MobileInner(props) {
     const fileInputRef = useRef(null);
     const voice = useVoiceInputController({
         ...props.voice,
+        confirmTranscription: props.voice?.confirmTranscription ?? true,
         onVoiceTranscript: props.voice?.onVoiceTranscript,
         onVoiceSend: async (blob) => {
             await props.onSend?.({
@@ -50,6 +52,11 @@ function MobileInner(props) {
             state.setText(props.value);
         }
     }, [props.value]);
+    useEffect(() => {
+        if (state.status === "transcript-ready") {
+            setTranscriptDraft(state.transcript);
+        }
+    }, [state.status, state.transcript]);
     const statusText = state.status === "recording"
         ? "正在录音"
         : state.status === "transcribing"
@@ -108,6 +115,10 @@ function MobileInner(props) {
         });
     };
     const isRecordingOverlayVisible = state.status === "recording" || state.status === "transcribing";
+    const isTranscriptConfirmVisible = state.status === "transcript-ready" && Boolean(state.transcript);
+    const transcriptConfirmSurface = `color-mix(in srgb, ${tokens.color.surfaceInputFocus} 86%, ${tokens.color.brandPrimary})`;
+    const transcriptConfirmActionSurface = `color-mix(in srgb, ${tokens.color.surfaceInputFocus} 72%, transparent)`;
+    const transcriptConfirmActionBorder = `color-mix(in srgb, ${tokens.color.borderDefault} 72%, transparent)`;
     const updateRecordingChoice = (clientX, clientY) => {
         const isInside = (node) => {
             if (!node) {
@@ -144,6 +155,44 @@ function MobileInner(props) {
             textarea?.setSelectionRange(caret, caret);
         });
     };
+    const sendConfirmedTranscript = async () => {
+        const transcript = transcriptDraft.trim();
+        if (!transcript) {
+            voice.clearTranscriptPreview();
+            return;
+        }
+        state.setStatus("sending");
+        if (props.voice?.onVoiceTranscript) {
+            await props.voice.onVoiceTranscript(transcript, {
+                blob: voice.pendingTranscriptBlob ?? new Blob(),
+                action: "transcribe",
+            });
+        }
+        else {
+            await props.onSend?.({
+                text: transcript,
+                attachments: state.attachments,
+                transcript,
+                mode: "voice",
+            });
+        }
+        state.setText("");
+        props.onChange?.("");
+        voice.clearTranscriptPreview();
+    };
+    const sendConfirmedOriginalVoice = async () => {
+        if (!voice.pendingTranscriptBlob) {
+            return;
+        }
+        state.setStatus("sending");
+        await props.onSend?.({
+            text: "",
+            attachments: state.attachments,
+            audio: voice.pendingTranscriptBlob,
+            mode: "voice",
+        });
+        voice.clearTranscriptPreview();
+    };
     const attachmentActionStyle = {
         display: "grid",
         justifyItems: "center",
@@ -282,7 +331,125 @@ function MobileInner(props) {
                                     boxShadow: recordingChoice === "transcribe"
                                         ? "0 16px 28px rgba(109, 74, 255, 0.24)"
                                         : "none",
-                                }, children: "\u8F6C\u6587\u5B57" })] })] })) : null, _jsx(AttachmentPreview, { attachments: attachments.attachments, tokens: tokens }), _jsx("input", { ref: imageInputRef, type: "file", accept: props.image?.accept ?? "image/*", style: { display: "none" }, onChange: (event) => {
+                                }, children: "\u8F6C\u6587\u5B57" })] })] })) : null, isTranscriptConfirmVisible ? (_jsxs("div", { style: {
+                    position: "fixed",
+                    inset: 0,
+                    zIndex: 1001,
+                    display: "grid",
+                    gridTemplateRows: "minmax(0, 1fr) auto",
+                    padding: "max(20px, env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px))",
+                    background: "rgba(10, 12, 16, 0.68)",
+                    backdropFilter: "blur(1px)",
+                }, children: [_jsx("div", { style: {
+                            minHeight: 0,
+                            display: "grid",
+                            alignContent: "end",
+                            paddingBottom: 72,
+                        }, children: _jsxs("div", { style: {
+                                justifySelf: "center",
+                                position: "relative",
+                                width: "min(100%, 524px)",
+                                minHeight: 88,
+                                padding: "24px 26px",
+                                borderRadius: tokens.radius.inputSurface + 8,
+                                background: transcriptConfirmSurface,
+                                border: `1px solid ${tokens.color.borderFocus}`,
+                                color: tokens.color.textPrimary,
+                                fontSize: Math.max(20, tokens.typography.inputText.size + 7),
+                                lineHeight: "34px",
+                                fontWeight: 680,
+                                boxShadow: tokens.shadow.inputElevated,
+                                display: "grid",
+                            }, children: [_jsx("textarea", { "aria-label": "\u7F16\u8F91\u8F6C\u5199\u6587\u672C", value: transcriptDraft, onChange: (event) => {
+                                        setTranscriptDraft(event.target.value);
+                                    }, style: {
+                                        width: "100%",
+                                        minHeight: 40,
+                                        maxHeight: 180,
+                                        resize: "none",
+                                        border: 0,
+                                        outline: "none",
+                                        background: "transparent",
+                                        color: "inherit",
+                                        font: "inherit",
+                                        lineHeight: "inherit",
+                                        padding: 0,
+                                        margin: 0,
+                                        overflowWrap: "anywhere",
+                                    } }), _jsx("span", { "aria-hidden": "true", style: {
+                                        position: "absolute",
+                                        right: 72,
+                                        bottom: -10,
+                                        width: 22,
+                                        height: 22,
+                                        borderRadius: 4,
+                                        background: transcriptConfirmSurface,
+                                        borderRight: `1px solid ${tokens.color.borderFocus}`,
+                                        borderBottom: `1px solid ${tokens.color.borderFocus}`,
+                                        transform: "rotate(45deg)",
+                                    } })] }) }), _jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "92px 112px minmax(120px, 176px)",
+                            justifyContent: "space-between",
+                            alignItems: "end",
+                            gap: 16,
+                            width: "min(100%, 524px)",
+                            justifySelf: "center",
+                        }, children: [_jsxs("button", { type: "button", "aria-label": "\u53D6\u6D88\u8F6C\u6587\u5B57", onClick: () => {
+                                    voice.clearTranscriptPreview();
+                                }, style: {
+                                    border: 0,
+                                    background: "transparent",
+                                    color: tokens.color.textSecondary,
+                                    display: "grid",
+                                    justifyItems: "center",
+                                    gap: 10,
+                                    fontSize: 14,
+                                    lineHeight: "20px",
+                                    fontWeight: 500,
+                                }, children: [_jsx("span", { style: {
+                                            width: 64,
+                                            height: 64,
+                                            borderRadius: "50%",
+                                            display: "grid",
+                                            placeItems: "center",
+                                            background: transcriptConfirmActionSurface,
+                                            border: `1px solid ${transcriptConfirmActionBorder}`,
+                                            color: tokens.color.textPrimary,
+                                            fontSize: 34,
+                                            lineHeight: 1,
+                                        }, children: "\u00D7" }), "\u53D6\u6D88"] }), _jsxs("button", { type: "button", "aria-label": "\u53D1\u9001\u539F\u8BED\u97F3", disabled: !voice.pendingTranscriptBlob || props.disabled, onClick: () => void sendConfirmedOriginalVoice(), style: {
+                                    border: 0,
+                                    background: "transparent",
+                                    color: tokens.color.textSecondary,
+                                    display: "grid",
+                                    justifyItems: "center",
+                                    gap: 10,
+                                    fontSize: 14,
+                                    lineHeight: "20px",
+                                    fontWeight: 500,
+                                    opacity: voice.pendingTranscriptBlob && !props.disabled ? 1 : 0.45,
+                                }, children: [_jsx("span", { style: {
+                                            width: 64,
+                                            height: 64,
+                                            borderRadius: "50%",
+                                            display: "grid",
+                                            placeItems: "center",
+                                            background: transcriptConfirmActionSurface,
+                                            border: `1px solid ${transcriptConfirmActionBorder}`,
+                                            color: tokens.color.textPrimary,
+                                        }, children: _jsx(MicOutlineIcon, { size: 25, strokeWidth: 2 }) }), "\u53D1\u9001\u539F\u8BED\u97F3"] }), _jsx("button", { type: "button", disabled: props.disabled || !transcriptDraft.trim(), onClick: () => void sendConfirmedTranscript(), style: {
+                                    border: 0,
+                                    minHeight: 64,
+                                    borderRadius: 999,
+                                    padding: "0 28px",
+                                    background: tokens.color.actionSendDefault,
+                                    color: tokens.color.actionSendTextOnPrimary,
+                                    fontSize: 17,
+                                    lineHeight: "24px",
+                                    fontWeight: 700,
+                                    opacity: props.disabled || !transcriptDraft.trim() ? 0.5 : 1,
+                                }, children: "\u53D1\u9001" })] })] })) : null, _jsx(AttachmentPreview, { attachments: attachments.attachments, tokens: tokens }), _jsx("input", { ref: imageInputRef, type: "file", accept: props.image?.accept ?? "image/*", style: { display: "none" }, onChange: (event) => {
                     const file = event.target.files?.[0];
                     if (file) {
                         void handleImageFile(file);

package/lib/hooks/useVoiceInputController.d.ts

@@ -5,8 +5,10 @@ export declare function useVoiceInputController(config?: ChatVoiceConfig): {
     status: import("..").ChatInputStatus;
     waveformLevels: number[];
     durationMs: number;
+    pendingTranscriptBlob: Blob | null;
     beginVoiceMode: () => void;
     setMode: (args_0: import("..").ChatInputMode | ((prev: import("..").ChatInputMode) => import("..").ChatInputMode)) => void;
+    clearTranscriptPreview: () => void;
     startRecording: () => void;
     cancelRecording: (message?: string | null) => void;
     stopRecording: (action?: StopAction) => void;

package/lib/hooks/useVoiceInputController.js

@@ -1,5 +1,5 @@
 import { useAtom } from "jotai";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { waveformLevelsAtom, recordingDurationMsAtom } from "../atoms/voiceAtoms";
 import { insertTranscriptText } from "./useTranscriptComposer";
 import { useChatInputState } from "./useChatInputState";
@@ -12,6 +12,7 @@ export function useVoiceInputController(config) {
     const managerRef = useRef(null);
     const stopActionRef = useRef("send");
     const abortMessageRef = useRef(null);
+    const [pendingTranscriptBlob, setPendingTranscriptBlob] = useState(null);
     const [levels, setLevels] = useAtom(waveformLevelsAtom);
     const [durationMs, setDurationMs] = useAtom(recordingDurationMsAtom);
     const { mode, setMode, status, setStatus, text, setText, setTranscript, setError, } = useChatInputState();
@@ -83,6 +84,7 @@ export function useVoiceInputController(config) {
                 return;
             }
             if (action === "send") {
+                setPendingTranscriptBlob(null);
                 setTranscript("");
                 setDurationMs(0);
                 setStatus(modeRef.current === "voice" ? "voice-mode-ready" : "idle");
@@ -94,7 +96,10 @@ export function useVoiceInputController(config) {
                 return;
             }
             setTranscript(nextTranscript);
-            setText(insertTranscriptText(textRef.current, nextTranscript));
+            setPendingTranscriptBlob(blob);
+            if (!configRef.current?.confirmTranscription) {
+                setText(insertTranscriptText(textRef.current, nextTranscript));
+            }
             setDurationMs(0);
             setStatus("transcript-ready");
             setError(null);
@@ -105,6 +110,7 @@ export function useVoiceInputController(config) {
         }
     }
     function finishVoiceSend(blob) {
+        setPendingTranscriptBlob(null);
         setTranscript("");
         setStatus(modeRef.current === "voice" ? "voice-mode-ready" : "idle");
         setError(null);
@@ -115,12 +121,20 @@ export function useVoiceInputController(config) {
         setStatus("voice-mode-ready");
         setError(null);
     }
+    function clearTranscriptPreview() {
+        setPendingTranscriptBlob(null);
+        setTranscript("");
+        setDurationMs(0);
+        setStatus(modeRef.current === "voice" ? "voice-mode-ready" : "idle");
+        setError(null);
+    }
     function startRecording() {
         if (status === "recording") {
             return;
         }
         setStatus("recording");
         setError(null);
+        setPendingTranscriptBlob(null);
         setTranscript("");
         setDurationMs(0);
         setLevels(DEFAULT_WAVEFORM);
@@ -145,8 +159,10 @@ export function useVoiceInputController(config) {
         status,
         waveformLevels: levels,
         durationMs,
+        pendingTranscriptBlob,
         beginVoiceMode,
         setMode,
+        clearTranscriptPreview,
         startRecording,
         cancelRecording,
         stopRecording,

package/lib/runtime/botAuth.d.ts

@@ -15,12 +15,14 @@ export type BotLoginSession = {
         accountId?: string;
         app?: string;
         kind?: string;
+        profileId?: string;
     };
     session?: {
         identity?: {
             accountId?: string;
             app?: string;
             kind?: string;
+            profileId?: string;
         };
     };
 };

package/lib/runtime/chatClient.d.ts

@@ -3,6 +3,7 @@ import { type PmateBotKeyFile } from "./botKey.js";
 import { type ChatBody, type ChatRuntimeMessage, type RealtimeClient } from "./protocol.js";
 export type ChatClientOptions = {
     appId: string;
+    profileId?: string;
     botKey?: PmateBotKeyFile | string | unknown;
     session?: BotLoginSession;
     hubUrl?: string;
@@ -15,6 +16,7 @@ export declare class ChatClient {
     private readonly options;
     private client;
     private session;
+    private profileIdValue;
     private botKey;
     private readonly pendingAcks;
     private readonly messageHandlers;
@@ -61,6 +63,9 @@ export declare class ChatClient {
     private handleIncoming;
     private waitUntilConnected;
     private accountId;
+    private resolveProfileId;
+    private profileId;
+    private fetchProfiles;
     private requireClient;
 }
 export declare function createChatClient(options: ChatClientOptions): ChatClient;

package/lib/runtime/chatClient.js

@@ -2,11 +2,13 @@ import { loginPmateBot } from "./botAuth.js";
 import { parsePmateBotKeyJson } from "./botKey.js";
 import { ChatMsgKind, ChatMsgOp, ChatRealtimeEvents, RuntimeWebsocketClient, createRuntimeMsg, } from "./protocol.js";
 const DEFAULT_HUB_URL = "wss://hub.pmate.chat";
+const DEFAULT_AUTH_API_BASE_URL = "https://auth-api-v2.pmate.chat";
 const DEFAULT_ACK_TIMEOUT_MS = 5_000;
 export class ChatClient {
     options;
     client = null;
     session = null;
+    profileIdValue = null;
     botKey = null;
     pendingAcks = new Map();
     messageHandlers = new Set();
@@ -29,9 +31,9 @@ export class ChatClient {
                 fetchImpl: this.options.fetchImpl,
             });
         }
-        const accountId = this.accountId();
+        const profileId = await this.resolveProfileId();
         if (!this.client) {
-            const hubUrl = normalizeWsUrl(this.options.hubUrl ?? DEFAULT_HUB_URL, accountId);
+            const hubUrl = normalizeWsUrl(this.options.hubUrl ?? DEFAULT_HUB_URL, profileId);
             this.client = new RuntimeWebsocketClient(hubUrl);
         }
         this.client.on(ChatRealtimeEvents.Message, (message) => {
@@ -89,7 +91,12 @@ export class ChatClient {
             kind: "group",
             threadKind: "group",
             action: "groupCreate",
-            payload: { appId: this.options.appId, groupId: input.groupId, members: input.members, title: input.title },
+            payload: {
+                appId: this.options.appId,
+                groupId: input.groupId,
+                members: input.members,
+                title: input.title,
+            },
         }, input.members);
     }
     async sendGroup(input) {
@@ -101,7 +108,7 @@ export class ChatClient {
         }, input.recipients);
     }
     async sendChat(to, body, recipients) {
-        const msg = createRuntimeMsg(this.accountId(), to, ChatMsgOp.CHAT, body, ChatMsgKind.DM);
+        const msg = createRuntimeMsg(this.profileId(), to, ChatMsgOp.CHAT, body, ChatMsgKind.DM);
         if (recipients) {
             msg.recipients = recipients;
         }
@@ -121,9 +128,11 @@ export class ChatClient {
         if (!token) {
             throw new Error("Missing PMate session token");
         }
-        const auth = createRuntimeMsg(this.accountId(), "@hub", ChatMsgOp.AUTH, {
+        const profileId = this.profileId();
+        const auth = createRuntimeMsg(profileId, "@hub", ChatMsgOp.AUTH, {
             token,
             as: "user",
+            profileId,
         }, ChatMsgKind.DM);
         await this.sendAndWaitForAck(auth);
     }
@@ -190,6 +199,48 @@ export class ChatClient {
         }
         return accountId;
     }
+    async resolveProfileId() {
+        const explicit = this.options.profileId ||
+            this.session?.session?.identity?.profileId ||
+            this.session?.identity?.profileId;
+        if (explicit) {
+            this.profileIdValue = explicit;
+            return explicit;
+        }
+        const accountId = this.accountId();
+        const appId = this.session?.session?.identity?.app ||
+            this.session?.identity?.app ||
+            this.options.appId;
+        const token = this.session?.token;
+        const profiles = await this.fetchProfiles(appId, accountId, token);
+        const profileId = profiles[0]?.id;
+        if (!profileId) {
+            throw new Error(`Missing profile id for app ${appId} and account ${accountId}`);
+        }
+        this.profileIdValue = profileId;
+        return profileId;
+    }
+    profileId() {
+        if (!this.profileIdValue) {
+            throw new Error("ChatClient is missing profile id; call connect() first");
+        }
+        return this.profileIdValue;
+    }
+    async fetchProfiles(appId, accountId, token) {
+        const fetcher = this.options.fetchImpl ?? fetch;
+        const baseUrl = (this.options.authBaseUrl ?? DEFAULT_AUTH_API_BASE_URL).replace(/\/+$/, "");
+        const url = new URL(`${baseUrl}/profiles`);
+        url.searchParams.set("app", appId);
+        url.searchParams.set("account", accountId);
+        const response = await fetcher(url.toString(), {
+            headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+        });
+        const json = (await response.json());
+        if (!response.ok || !json.success || !Array.isArray(json.data)) {
+            throw new Error(json.message || "Failed to resolve chat profile");
+        }
+        return json.data;
+    }
     requireClient() {
         if (!this.client) {
             throw new Error("ChatClient is not connected");
@@ -200,13 +251,13 @@ export class ChatClient {
 export function createChatClient(options) {
     return new ChatClient(options);
 }
-function normalizeWsUrl(baseUrl, userId) {
+function normalizeWsUrl(baseUrl, profileId) {
     const url = new URL(baseUrl);
     if (url.protocol === "http:")
         url.protocol = "ws:";
     if (url.protocol === "https:")
         url.protocol = "wss:";
-    url.searchParams.set("userId", userId);
+    url.searchParams.set("userId", profileId);
     return url.toString();
 }
 function cleanObject(input) {

package/lib/types/voice.d.ts

@@ -12,6 +12,7 @@ export type ChatVoiceConfig = {
     lang?: string;
     minDurationMs?: number;
     transcribeTimeoutMs?: number;
+    confirmTranscription?: boolean;
     simulatedTranscript?: string;
     shortRecordingMessage?: string;
     onVoiceSend?: (blob: Blob) => Promise<void> | void;

package/package.json

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