@pmate/chat-sdk 0.1.11 → 0.1.13

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",
@@ -197,14 +246,16 @@ function MobileInner(props) {
             boxShadow: "none",
             overflow: "visible",
         }, children: [isRecordingOverlayVisible ? (_jsxs("div", { style: {
-                    position: "absolute",
-                    left: 0,
-                    right: 0,
-                    bottom: 72,
+                    position: "fixed",
+                    left: "50%",
+                    bottom: "calc(72px + env(safe-area-inset-bottom, 0px))",
+                    width: "min(420px, calc(100vw - 16px))",
+                    transform: "translateX(-50%)",
                     height: 250,
                     pointerEvents: "none",
                     background: "linear-gradient(180deg, rgba(22, 16, 45, 0) 0%, rgba(22, 16, 45, 0.24) 34%, rgba(22, 16, 45, 0.6) 100%)",
                     borderRadius: 28,
+                    zIndex: 1000,
                 }, children: [_jsxs("div", { style: {
                             position: "absolute",
                             left: "50%",
@@ -280,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/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.11",
+  "version": "0.1.13",
   "description": "Cross-platform PMate chat input components, voice input primitives, and ASR helpers",
   "type": "module",
   "main": "./lib/index.js",