@pmate/chat-sdk 0.1.6 → 0.1.8

package/lib/components/AttachmentPreview.js

@@ -1,13 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 export function AttachmentPreview({ attachments, tokens, }) {
     if (attachments.length === 0) {
         return null;
     }
-    return (_jsx("div", { className: "flex flex-wrap", style: { gap: tokens.spacing.attachmentGap }, children: attachments.map((attachment) => (_jsx("span", { style: {
+    return (_jsx("div", { className: "flex flex-wrap", style: { gap: tokens.spacing.attachmentGap }, children: attachments.map((attachment) => (_jsxs("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
                 borderRadius: tokens.radius.attachmentPreview,
                 background: tokens.color.surfaceInputFocus,
                 color: tokens.color.textSecondary,
-                padding: "4px 10px",
-            }, title: attachment.url ?? attachment.name, children: attachment.name }, attachment.id))) }));
+                border: `1px solid ${tokens.color.borderDefault}`,
+                padding: "6px 10px",
+                fontSize: 12,
+                lineHeight: "16px",
+                fontFamily: tokens.typography.familyBase,
+                boxShadow: tokens.shadow.inputElevated,
+            }, title: attachment.url ?? attachment.name, children: [_jsx("span", { "aria-hidden": "true", style: {
+                        width: 6,
+                        height: 6,
+                        borderRadius: 999,
+                        background: attachment.kind === "image"
+                            ? tokens.color.iconActive
+                            : tokens.color.textSecondary,
+                        opacity: 0.9,
+                    } }), attachment.name] }, attachment.id))) }));
 }

package/lib/components/ChatInputDesktop.js

@@ -11,21 +11,23 @@ import { useVoiceInputController } from "../hooks/useVoiceInputController";
 import { AttachmentPreview } from "./AttachmentPreview";
 import { EmojiPicker } from "./EmojiPicker";
 import { EmojiTrigger } from "./EmojiTrigger";
+import { MoreTrigger } from "./ImageTrigger";
 import { InputSurface } from "./InputSurface";
-import { SendAction } from "./SendAction";
 import { StatusHint } from "./StatusHint";
 import { TextComposer } from "./TextComposer";
 import { WaveformFeedback } from "./WaveformFeedback";
-import { ImageOutlineIcon, MicOutlineIcon } from "./icons";
+import { FileOutlineIcon, ImageOutlineIcon, MicOutlineIcon, StopCircleOutlineIcon, } from "./icons";
 function DesktopInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
+    const [isMoreOpen, setIsMoreOpen] = useState(false);
     const [isUploadingImage, setIsUploadingImage] = useState(false);
     const textComposerRef = useRef(null);
     const emojiAnchorRef = useRef(null);
     const imageInputRef = useRef(null);
+    const fileInputRef = useRef(null);
     const voice = useVoiceInputController({
         ...props.voice,
         onVoiceSend: async (blob) => {
@@ -99,6 +101,13 @@ function DesktopInner(props) {
             setIsUploadingImage(false);
         }
     };
+    const handleFileAttachment = (file) => {
+        attachments.addAttachment({
+            kind: "file",
+            name: file.name,
+            file,
+        });
+    };
     const insertEmoji = (emoji) => {
         const textarea = textComposerRef.current;
         const start = textarea?.selectionStart ?? state.text.length;
@@ -113,53 +122,150 @@ function DesktopInner(props) {
             textarea?.setSelectionRange(caret, caret);
         });
     };
-    return (_jsx(InputSurface, { tokens: tokens, status: state.status, children: _jsxs("div", { className: "grid gap-3", style: { position: "relative" }, children: [_jsx("input", { ref: imageInputRef, type: "file", accept: props.image?.accept ?? "image/*", style: { display: "none" }, onChange: (event) => {
+    const attachmentActionStyle = {
+        display: "grid",
+        justifyItems: "center",
+        alignContent: "center",
+        gap: 7,
+        minWidth: 72,
+        minHeight: 78,
+        border: 0,
+        borderRadius: 18,
+        background: "transparent",
+        color: tokens.color.textSecondary,
+        cursor: "pointer",
+        fontSize: 12,
+        fontFamily: tokens.typography.familyBase,
+    };
+    const attachmentIconStyle = {
+        width: 52,
+        height: 52,
+        borderRadius: 16,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: tokens.color.surfaceInputDefault,
+        color: tokens.color.iconDefault,
+        border: `1px solid ${tokens.color.borderDefault}`,
+        boxShadow: "0 10px 26px rgba(0, 0, 0, 0.10)",
+    };
+    const sideActionStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 32,
+        height: 32,
+        border: 0,
+        borderRadius: 999,
+        background: "transparent",
+        color: tokens.color.iconDefault,
+        cursor: "pointer",
+        alignSelf: "center",
+        transition: `color ${tokens.motion.stateTransition}, transform ${tokens.motion.pressFeedback}`,
+    };
+    return (_jsx("div", { style: { position: "relative", width: "100%" }, children: _jsxs("div", { className: "grid gap-3", style: { position: "relative", width: "100%" }, children: [_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);
+                            setIsMoreOpen(false);
                         }
                         event.currentTarget.value = "";
-                    } }), _jsx(EmojiPicker, { open: isEmojiOpen, isMobile: false, anchorRef: emojiAnchorRef, onSelect: insertEmoji, onClose: () => setIsEmojiOpen(false) }), _jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, placeholder: "Message PMate", onChange: (event) => {
-                        state.setText(event.target.value);
-                        state.setStatus(event.target.value.trim() ? "typing" : "idle");
-                        props.onChange?.(event.target.value);
-                    } }), _jsx(AttachmentPreview, { attachments: attachments.attachments, tokens: tokens }), voice.status === "recording" ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(WaveformFeedback, { levels: voice.waveformLevels, tokens: tokens, compact: true }), _jsxs("span", { style: { color: tokens.color.textSecondary, fontSize: 12 }, children: [Math.max(1, Math.round(voice.durationMs / 1000)), "s"] })] })) : null, _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(EmojiTrigger, { ref: emojiAnchorRef, style: { color: tokens.color.iconDefault }, onClick: () => setIsEmojiOpen((prev) => !prev) }), _jsx("button", { type: "button", onClick: () => imageInputRef.current?.click(), style: {
-                                        display: "inline-flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        width: 32,
-                                        height: 32,
-                                        border: 0,
-                                        background: "transparent",
-                                        color: tokens.color.iconDefault,
-                                        cursor: props.disabled || isUploadingImage ? "not-allowed" : "pointer",
-                                        opacity: props.disabled || isUploadingImage ? 0.4 : 1,
-                                    }, disabled: props.disabled || isUploadingImage, children: _jsx(ImageOutlineIcon, { size: 22 }) }), _jsx("button", { type: "button", onClick: () => {
-                                        if (props.disabled || props.enableVoice === false) {
-                                            return;
-                                        }
-                                        if (voice.status === "recording") {
-                                            voice.stopRecording("transcribe");
-                                            return;
+                    } }), _jsx("input", { ref: fileInputRef, type: "file", style: { display: "none" }, onChange: (event) => {
+                        const file = event.target.files?.[0];
+                        if (file) {
+                            handleFileAttachment(file);
+                            setIsMoreOpen(false);
+                        }
+                        event.currentTarget.value = "";
+                    } }), _jsx(EmojiPicker, { open: isEmojiOpen, isMobile: false, anchorRef: emojiAnchorRef, onSelect: insertEmoji, onClose: () => setIsEmojiOpen(false) }), _jsx(AttachmentPreview, { attachments: attachments.attachments, tokens: tokens }), isMoreOpen ? (_jsxs("div", { style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        bottom: 66,
+                        padding: "12px 14px",
+                        borderRadius: 24,
+                        background: `color-mix(in srgb, ${tokens.color.surfaceInputFocus} 94%, transparent)`,
+                        border: `1px solid ${tokens.color.borderDefault}`,
+                        display: "flex",
+                        gap: 12,
+                        boxShadow: "0 18px 50px rgba(0, 0, 0, 0.16)",
+                        backdropFilter: "blur(18px)",
+                        zIndex: 3,
+                    }, children: [_jsxs("button", { type: "button", style: attachmentActionStyle, disabled: props.disabled || isUploadingImage, onClick: () => imageInputRef.current?.click(), children: [_jsx("span", { style: attachmentIconStyle, children: _jsx(ImageOutlineIcon, { size: 24 }) }), "\u56FE\u7247"] }), _jsxs("button", { type: "button", style: attachmentActionStyle, disabled: props.disabled, onClick: () => fileInputRef.current?.click(), children: [_jsx("span", { style: attachmentIconStyle, children: _jsx(FileOutlineIcon, { size: 24 }) }), "\u6587\u4EF6"] })] })) : null, voice.status === "recording" ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(WaveformFeedback, { levels: voice.waveformLevels, tokens: tokens, compact: true }), _jsxs("span", { style: { color: tokens.color.textSecondary, fontSize: 12 }, children: [Math.max(1, Math.round(voice.durationMs / 1000)), "s"] })] })) : null, _jsxs("div", { style: {
+                        display: "grid",
+                        gridTemplateColumns: "32px minmax(0, 1fr) 32px 32px",
+                        alignItems: "center",
+                        gap: 6,
+                    }, children: [_jsx("button", { type: "button", onClick: () => {
+                                if (props.disabled || props.enableVoice === false) {
+                                    return;
+                                }
+                                if (voice.status === "recording") {
+                                    voice.stopRecording("transcribe");
+                                    return;
+                                }
+                                if (voice.status === "transcribing") {
+                                    return;
+                                }
+                                voice.beginVoiceMode();
+                                voice.startRecording();
+                            }, style: {
+                                ...sideActionStyle,
+                                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: 27 })) : (_jsx(MicOutlineIcon, { size: 24, strokeWidth: 2 })) }), _jsx(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
+                                minHeight: 52,
+                                padding: "0 14px",
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: _jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 1, placeholder: "Message PMate", onKeyDown: (event) => {
+                                    if (event.key !== "Enter") {
+                                        return;
+                                    }
+                                    const shouldSend = props.submitShortcut === "meta-enter" ? event.metaKey || event.ctrlKey : !event.shiftKey;
+                                    if (shouldSend) {
+                                        event.preventDefault();
+                                        if (state.text.trim() || state.attachments.length > 0) {
+                                            void onSend();
                                         }
-                                        voice.beginVoiceMode();
-                                        voice.startRecording();
-                                    }, style: {
-                                        display: "inline-flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        width: 32,
-                                        height: 32,
-                                        border: 0,
-                                        background: "transparent",
-                                        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"
-                                        ? "停止录音并转文字"
-                                        : "开始语音输入", children: _jsx(MicOutlineIcon, { size: 22 }) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { style: { color: tokens.color.textSecondary, fontSize: 12 }, children: "Enter send / Shift+Enter newline" }), _jsx(SendAction, { tokens: tokens, disabled: props.disabled || (!state.text.trim() && state.attachments.length === 0), onClick: () => void onSend(), children: "Send" })] })] }), _jsx(StatusHint, { tokens: tokens, text: desktopStatusText, tone: state.error ? "error" : "secondary" })] }) }));
+                                    }
+                                }, onChange: (event) => {
+                                    state.setText(event.target.value);
+                                    state.setStatus(event.target.value.trim() ? "typing" : "idle");
+                                    props.onChange?.(event.target.value);
+                                }, style: {
+                                    minHeight: tokens.typography.inputText.lineHeight,
+                                    height: tokens.typography.inputText.lineHeight,
+                                    maxHeight: 128,
+                                    paddingTop: 0,
+                                    paddingBottom: 0,
+                                    display: "block",
+                                    overflow: "hidden",
+                                    caretColor: tokens.color.brandPrimary,
+                                } }) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": 24, style: {
+                                ...sideActionStyle,
+                                width: 32,
+                                height: 32,
+                            }, onClick: () => {
+                                setIsMoreOpen(false);
+                                setIsEmojiOpen((prev) => !prev);
+                            } }), _jsx(MoreTrigger, { "data-icon-size": 24, onClick: () => {
+                                setIsEmojiOpen(false);
+                                setIsMoreOpen((prev) => !prev);
+                            }, disabled: props.disabled, style: {
+                                ...sideActionStyle,
+                                color: isMoreOpen ? tokens.color.iconActive : tokens.color.iconDefault,
+                                width: 32,
+                                height: 32,
+                                opacity: props.disabled ? 0.4 : 1,
+                            } })] }), _jsx(StatusHint, { tokens: tokens, text: desktopStatusText, tone: state.error ? "error" : "secondary" })] }) }));
 }
 export function ChatInputDesktop(props) {
     const stateKey = JSON.stringify({

package/lib/components/ChatInputMobile.js

@@ -13,25 +13,26 @@ import { AttachmentPreview } from "./AttachmentPreview";
 import { EmojiPicker } from "./EmojiPicker";
 import { EmojiTrigger } from "./EmojiTrigger";
 import { HoldToTalkButton } from "./HoldToTalkButton";
-import { ImageTrigger } from "./ImageTrigger";
+import { MoreTrigger } from "./ImageTrigger";
 import { InputSurface } from "./InputSurface";
-import { SendAction } from "./SendAction";
 import { StatusHint } from "./StatusHint";
 import { TextComposer } from "./TextComposer";
 import { WaveformFeedback } from "./WaveformFeedback";
-import { KeyboardOutlineIcon, MicOutlineIcon } from "./icons";
+import { FileOutlineIcon, ImageOutlineIcon, KeyboardOutlineIcon, MicOutlineIcon, } from "./icons";
 function MobileInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
     const [recordingChoice, setRecordingChoice] = useState("send");
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
+    const [isMoreOpen, setIsMoreOpen] = useState(false);
     const [isUploadingImage, setIsUploadingImage] = useState(false);
     const cancelZoneRef = useRef(null);
     const transcribeZoneRef = useRef(null);
     const textComposerRef = useRef(null);
     const emojiAnchorRef = useRef(null);
     const imageInputRef = useRef(null);
+    const fileInputRef = useRef(null);
     const voice = useVoiceInputController({
         ...props.voice,
         onVoiceSend: async (blob) => {
@@ -98,6 +99,13 @@ function MobileInner(props) {
             setIsUploadingImage(false);
         }
     };
+    const handleFileAttachment = (file) => {
+        attachments.addAttachment({
+            kind: "file",
+            name: file.name,
+            file,
+        });
+    };
     const isRecordingOverlayVisible = state.status === "recording" || state.status === "transcribing";
     const updateRecordingChoice = (clientX, clientY) => {
         const isInside = (node) => {
@@ -135,10 +143,52 @@ function MobileInner(props) {
             textarea?.setSelectionRange(caret, caret);
         });
     };
+    const attachmentActionStyle = {
+        display: "grid",
+        justifyItems: "center",
+        alignContent: "center",
+        gap: 7,
+        minWidth: 72,
+        minHeight: 78,
+        border: 0,
+        borderRadius: 18,
+        background: "transparent",
+        color: tokens.color.textSecondary,
+        cursor: "pointer",
+        fontSize: 12,
+        fontFamily: tokens.typography.familyBase,
+    };
+    const attachmentIconStyle = {
+        width: 52,
+        height: 52,
+        borderRadius: 16,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: tokens.color.surfaceInputDefault,
+        color: tokens.color.iconDefault,
+        border: `1px solid ${tokens.color.borderDefault}`,
+        boxShadow: "0 10px 26px rgba(0, 0, 0, 0.10)",
+    };
+    const sideActionStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 30,
+        height: 30,
+        border: 0,
+        borderRadius: 999,
+        background: "transparent",
+        color: tokens.color.iconDefault,
+        cursor: "pointer",
+        alignSelf: "center",
+        WebkitTapHighlightColor: "transparent",
+        transition: `color ${tokens.motion.stateTransition}, transform ${tokens.motion.pressFeedback}`,
+    };
     return (_jsxs("div", { style: {
             position: "relative",
             width: "100%",
-            maxWidth: 420,
+            maxWidth: "min(420px, calc(100vw - 16px))",
             padding: 0,
             background: "transparent",
             borderRadius: tokens.radius.inputSurface,
@@ -233,35 +283,48 @@ function MobileInner(props) {
                     const file = event.target.files?.[0];
                     if (file) {
                         void handleImageFile(file);
+                        setIsMoreOpen(false);
+                    }
+                    event.currentTarget.value = "";
+                } }), _jsx("input", { ref: fileInputRef, type: "file", style: { display: "none" }, onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    if (file) {
+                        handleFileAttachment(file);
+                        setIsMoreOpen(false);
                     }
                     event.currentTarget.value = "";
-                } }), _jsxs("div", { style: {
+                } }), isMoreOpen ? (_jsxs("div", { style: {
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    bottom: 64,
+                    padding: "12px 14px",
+                    borderRadius: 24,
+                    background: `color-mix(in srgb, ${tokens.color.surfaceInputFocus} 94%, transparent)`,
+                    border: `1px solid ${tokens.color.borderDefault}`,
+                    display: "flex",
+                    gap: 12,
+                    boxShadow: "0 18px 50px rgba(0, 0, 0, 0.16)",
+                    backdropFilter: "blur(18px)",
+                    zIndex: 3,
+                }, children: [_jsxs("button", { type: "button", style: attachmentActionStyle, disabled: props.disabled || isUploadingImage, onClick: () => imageInputRef.current?.click(), children: [_jsx("span", { style: attachmentIconStyle, children: _jsx(ImageOutlineIcon, { size: 24 }) }), "\u56FE\u7247"] }), _jsxs("button", { type: "button", style: attachmentActionStyle, disabled: props.disabled, onClick: () => fileInputRef.current?.click(), children: [_jsx("span", { style: attachmentIconStyle, children: _jsx(FileOutlineIcon, { size: 24 }) }), "\u6587\u4EF6"] })] })) : null, _jsxs("div", { style: {
                     position: "relative",
                     display: "grid",
-                    gridTemplateColumns: "32px minmax(0, 1fr) 32px auto",
-                    gap: tokens.spacing.actionGap,
-                    alignItems: "end",
+                    gridTemplateColumns: "30px minmax(0, 1fr) 30px 30px",
+                    gap: 4,
+                    alignItems: "center",
                     padding: "0 0 env(safe-area-inset-bottom, 0px)",
                 }, children: [_jsx(EmojiPicker, { open: isEmojiOpen, isMobile: true, anchorRef: emojiAnchorRef, onSelect: insertEmoji, onClose: () => setIsEmojiOpen(false) }), _jsx("button", { type: "button", "aria-label": state.mode === "voice" ? "切换到文字输入" : "切换到语音输入", disabled: props.disabled || props.enableVoice === false, onClick: () => {
                             const next = state.mode === "voice" ? "text" : "voice";
                             state.setMode(next);
                             state.setStatus(next === "voice" ? "voice-mode-ready" : "idle");
                         }, style: {
-                            display: "inline-flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: 28,
-                            height: 28,
-                            border: 0,
-                            borderRadius: 999,
-                            background: "transparent",
+                            ...sideActionStyle,
                             color: state.mode === "voice"
                                 ? tokens.color.iconActive
                                 : tokens.color.iconDefault,
-                            cursor: "pointer",
-                            alignSelf: "center",
                             opacity: props.disabled ? 0.45 : 1,
-                        }, children: state.mode === "voice" ? _jsx(KeyboardOutlineIcon, { size: 24 }) : _jsx(MicOutlineIcon, { size: 24 }) }), _jsx(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
+                        }, children: state.mode === "voice" ? (_jsx(KeyboardOutlineIcon, { size: 27 })) : (_jsx(MicOutlineIcon, { size: 24, strokeWidth: 2 })) }), _jsx(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
                             borderRadius: tokens.radius.inputSurface,
                             background: state.status === "error"
                                 ? tokens.color.surfaceInputError
@@ -276,9 +339,11 @@ function MobileInner(props) {
                             boxShadow: state.status === "recording"
                                 ? tokens.shadow.recordingActive
                                 : tokens.shadow.inputElevated,
-                            minHeight: state.mode === "voice" ? 48 : 42,
-                            padding: state.mode === "voice" ? "0" : "0 10px",
-                        }, children: state.mode === "voice" ? (_jsx("div", { children: _jsx(HoldToTalkButton, { tokens: tokens, active: isRecordingOverlayVisible, disabled: props.disabled, text: "\u6309\u4F4F \u8BF4\u8BDD", activeText: "\u677E\u5F00 \u53D1\u9001", onPressStart: () => {
+                            minHeight: 48,
+                            display: "flex",
+                            alignItems: "center",
+                            padding: state.mode === "voice" ? "0" : "0 12px",
+                        }, children: state.mode === "voice" ? (_jsx("div", { style: { minHeight: 48 }, children: _jsx(HoldToTalkButton, { tokens: tokens, active: isRecordingOverlayVisible, disabled: props.disabled, text: "\u6309\u4F4F \u8BF4\u8BDD", activeText: "\u677E\u5F00 \u53D1\u9001", onPressStart: () => {
                                     setRecordingChoice("send");
                                     voice.startRecording();
                                 }, onPressMove: (event) => {
@@ -297,37 +362,47 @@ function MobileInner(props) {
                                 }, onPressCancel: () => {
                                     setRecordingChoice("send");
                                     voice.cancelRecording();
-                                } }) })) : (_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 1, placeholder: "Message", onChange: (event) => {
+                                } }) })) : (_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 1, wrap: "off", placeholder: "Message", enterKeyHint: "send", onKeyDown: (event) => {
+                                if (event.key === "Enter" && !event.shiftKey) {
+                                    event.preventDefault();
+                                    if (state.text.trim()) {
+                                        void onSend();
+                                    }
+                                }
+                            }, onChange: (event) => {
                                 state.setText(event.target.value);
                                 state.setStatus(event.target.value.trim() ? "typing" : "idle");
                                 props.onChange?.(event.target.value);
                             }, style: {
-                                minHeight: 18,
+                                minHeight: tokens.typography.inputText.lineHeight,
+                                height: tokens.typography.inputText.lineHeight,
                                 maxHeight: 92,
-                                paddingTop: 9,
-                                paddingBottom: 9,
+                                paddingTop: 0,
+                                paddingBottom: 0,
+                                display: "block",
+                                overflow: "hidden",
+                                whiteSpace: "pre",
                                 color: tokens.color.textPrimary,
                                 fontSize: tokens.typography.inputText.size,
                                 lineHeight: `${tokens.typography.inputText.lineHeight}px`,
                                 caretColor: tokens.color.brandPrimary,
-                            } })) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": 24, onClick: () => setIsEmojiOpen((prev) => !prev), style: {
-                            color: tokens.color.iconDefault,
-                            alignSelf: "center",
-                            width: 28,
-                            height: 28,
-                        } }), state.mode === "text" && state.text.trim() ? (_jsx(SendAction, { tokens: tokens, disabled: props.disabled, onClick: () => void onSend(), style: {
-                            minWidth: 64,
-                            minHeight: 32,
-                            borderRadius: tokens.radius.actionButton,
-                            alignSelf: "center",
-                            padding: "0 14px",
-                        }, children: "Send" })) : (_jsx(ImageTrigger, { "data-icon-size": 24, onClick: () => imageInputRef.current?.click(), disabled: props.disabled || isUploadingImage, style: {
-                            color: tokens.color.iconDefault,
-                            alignSelf: "center",
-                            width: 28,
-                            height: 28,
-                            opacity: props.disabled || isUploadingImage ? 0.4 : 1,
-                        } }))] }), _jsx(StatusHint, { tokens: tokens, text: state.status === "recording" || state.status === "transcribing" ? undefined : statusText, tone: state.status === "error" ? "error" : "secondary" })] }));
+                            } })) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": 24, onClick: () => {
+                            setIsMoreOpen(false);
+                            setIsEmojiOpen((prev) => !prev);
+                        }, style: {
+                            ...sideActionStyle,
+                            width: 30,
+                            height: 30,
+                        } }), _jsx(MoreTrigger, { "data-icon-size": 24, onClick: () => {
+                            setIsEmojiOpen(false);
+                            setIsMoreOpen((prev) => !prev);
+                        }, disabled: props.disabled, style: {
+                            ...sideActionStyle,
+                            color: isMoreOpen ? tokens.color.iconActive : tokens.color.iconDefault,
+                            width: 30,
+                            height: 30,
+                            opacity: props.disabled ? 0.4 : 1,
+                        } })] }), _jsx(StatusHint, { tokens: tokens, text: state.status === "recording" || state.status === "transcribing" ? undefined : statusText, tone: state.status === "error" ? "error" : "secondary" })] }));
 }
 export function ChatInputMobile(props) {
     const stateKey = JSON.stringify({

package/lib/components/HoldToTalkButton.js

@@ -18,15 +18,16 @@ export function HoldToTalkButton({ tokens, active, disabled, text = "按住 说
         }, onPointerMove: onPressMove, onPointerUp: onPressEnd, onPointerCancel: onPressCancel, style: {
             width: "100%",
             borderRadius: tokens.radius.mobileHoldToTalk,
-            background: active ? "#ECE2FF" : "#FFFFFF",
-            color: active ? "#4E2DBF" : "#171717",
-            border: `1px solid ${active ? "#BFA9FF" : "#E5E7EB"}`,
-            boxShadow: active ? "0 14px 28px rgba(109, 74, 255, 0.22)" : "none",
-            padding: "15px 18px",
-            minHeight: 60,
-            fontSize: 16,
-            lineHeight: "22px",
-            fontWeight: 600,
+            background: active ? tokens.color.surfaceInputRecording : "transparent",
+            color: active ? tokens.color.iconActive : tokens.color.textPrimary,
+            border: 0,
+            boxShadow: "none",
+            padding: "0 16px",
+            minHeight: 48,
+            fontFamily: tokens.typography.familyBase,
+            fontSize: tokens.typography.voiceHoldToTalk.size,
+            lineHeight: `${tokens.typography.voiceHoldToTalk.lineHeight}px`,
+            fontWeight: tokens.typography.voiceHoldToTalk.weight,
             opacity: disabled ? 0.55 : 1,
             userSelect: "none",
             WebkitUserSelect: "none",

package/lib/components/ImageTrigger.d.ts

@@ -1,2 +1,2 @@
 import type { ButtonHTMLAttributes } from "react";
-export declare function ImageTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+export declare function MoreTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;

package/lib/components/ImageTrigger.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { PlusOutlineIcon } from "./icons";
-export function ImageTrigger(props) {
+export function MoreTrigger(props) {
     const iconSize = Number(props["data-icon-size"] ?? 26);
     return (_jsx("button", { type: "button", "aria-label": "More", ...props, style: {
             display: "inline-flex",

package/lib/components/icons.d.ts

@@ -4,8 +4,11 @@ type IconProps = {
     strokeWidth?: number;
 };
 export declare function MicOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function VoiceInputOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function KeyboardOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function StopCircleOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function SmileOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function PlusOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
 export declare function ImageOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileOutlineIcon({ size, stroke, strokeWidth, }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/icons.js

@@ -6,7 +6,10 @@ function BaseIcon({ size = 22, children, }) {
 export function MicOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.9, }) {
     return (_jsxs(BaseIcon, { size: size, children: [_jsx("rect", { x: "9", y: "3", width: "6", height: "11", rx: "3", stroke: stroke, strokeWidth: strokeWidth }), _jsx("path", { d: "M6.5 11.5C6.5 14.5376 8.96243 17 12 17C15.0376 17 17.5 14.5376 17.5 11.5", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" }), _jsx("path", { d: "M12 17V21", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" }), _jsx("path", { d: "M8.5 21H15.5", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" })] }));
 }
-export function KeyboardOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.8, }) {
+export function VoiceInputOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.7, }) {
+    return (_jsxs(BaseIcon, { size: size, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: stroke, strokeWidth: strokeWidth }), _jsx("path", { d: "M7.4 10.6H8.9L11 8.7V15.3L8.9 13.4H7.4V10.6Z", stroke: stroke, strokeWidth: strokeWidth, strokeLinejoin: "round" }), _jsx("path", { d: "M13.25 9.6C13.9 10.2 14.25 11.02 14.25 12C14.25 12.98 13.9 13.8 13.25 14.4", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" }), _jsx("path", { d: "M15.45 7.45C16.63 8.55 17.3 10.12 17.3 12C17.3 13.88 16.63 15.45 15.45 16.55", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" })] }));
+}
+export function KeyboardOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.7, }) {
     return (_jsxs(BaseIcon, { size: size, children: [_jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "3", stroke: stroke, strokeWidth: strokeWidth }), [
                 [6.5, 9],
                 [10, 9],
@@ -18,12 +21,18 @@ export function KeyboardOutlineIcon({ size, stroke = "currentColor", strokeWidth
                 [17, 12.5],
             ].map(([cx, cy], index) => (_jsx("circle", { cx: cx, cy: cy, r: "0.8", fill: stroke }, index))), _jsx("path", { d: "M7 16.2H17", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" })] }));
 }
-export function SmileOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.8, }) {
+export function StopCircleOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.8, }) {
+    return (_jsxs(BaseIcon, { size: size, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: stroke, strokeWidth: strokeWidth }), _jsx("rect", { x: "8.4", y: "8.4", width: "7.2", height: "7.2", rx: "1.4", stroke: stroke, strokeWidth: strokeWidth, strokeLinejoin: "round" })] }));
+}
+export function SmileOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.7, }) {
     return (_jsxs(BaseIcon, { size: size, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: stroke, strokeWidth: strokeWidth }), _jsx("circle", { cx: "9", cy: "10", r: "1", fill: stroke }), _jsx("circle", { cx: "15", cy: "10", r: "1", fill: stroke }), _jsx("path", { d: "M8.2 14.2C9.15 15.55 10.42 16.2 12 16.2C13.58 16.2 14.85 15.55 15.8 14.2", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" })] }));
 }
-export function PlusOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.8, }) {
+export function PlusOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.7, }) {
     return (_jsxs(BaseIcon, { size: size, children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: stroke, strokeWidth: strokeWidth }), _jsx("path", { d: "M12 8V16", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" }), _jsx("path", { d: "M8 12H16", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" })] }));
 }
-export function ImageOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.8, }) {
+export function ImageOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.7, }) {
     return (_jsxs(BaseIcon, { size: size, children: [_jsx("rect", { x: "4", y: "5", width: "16", height: "14", rx: "3", stroke: stroke, strokeWidth: strokeWidth }), _jsx("circle", { cx: "9", cy: "10", r: "1.6", stroke: stroke, strokeWidth: strokeWidth }), _jsx("path", { d: "M7 16L11.2 12.1C11.75 11.58 12.63 11.58 13.18 12.1L17 15.6", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
+export function FileOutlineIcon({ size, stroke = "currentColor", strokeWidth = 1.7, }) {
+    return (_jsxs(BaseIcon, { size: size, children: [_jsx("path", { d: "M7 3.8H13.4L18 8.4V20.2H7V3.8Z", stroke: stroke, strokeWidth: strokeWidth, strokeLinejoin: "round" }), _jsx("path", { d: "M13.4 3.8V8.4H18", stroke: stroke, strokeWidth: strokeWidth, strokeLinejoin: "round" }), _jsx("path", { d: "M9.7 12.4H15.3", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" }), _jsx("path", { d: "M9.7 15.5H14", stroke: stroke, strokeWidth: strokeWidth, strokeLinecap: "round" })] }));
+}

package/lib/hooks/useAttachmentState.d.ts

@@ -1,6 +1,8 @@
 import type { ChatAttachment } from "../types/attachment";
 export declare function useAttachmentState(): {
     attachments: ChatAttachment[];
-    addAttachment(attachment: Omit<ChatAttachment, "id" | "kind">): void;
+    addAttachment(attachment: Omit<ChatAttachment, "id" | "kind"> & {
+        kind?: ChatAttachment["kind"];
+    }): void;
     removeAttachment(id: string): void;
 };