@pmate/chat-sdk 0.1.16 → 0.1.18

package/lib/components/ChatInputDesktop.js

@@ -13,6 +13,7 @@ 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";
@@ -182,7 +183,7 @@ function DesktopInner(props) {
                         position: "absolute",
                         left: 0,
                         right: 0,
-                        bottom: 66,
+                        bottom: props.multiline ? 154 : 66,
                         padding: "12px 14px",
                         borderRadius: 24,
                         background: `color-mix(in srgb, ${tokens.color.surfaceInputFocus} 94%, transparent)`,
@@ -192,7 +193,46 @@ function DesktopInner(props) {
                         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: {
+                    }, 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, props.multiline ? (_jsxs(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
+                        minHeight: 144,
+                        padding: "16px 18px 12px",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 12,
+                    }, children: [_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 3, placeholder: "Message PMate", onKeyDown: (event) => {
+                                if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                                    event.preventDefault();
+                                    if (state.text.trim() || state.attachments.length > 0)
+                                        void onSend();
+                                }
+                            }, onChange: (event) => {
+                                state.setText(event.target.value);
+                                state.setStatus(event.target.value.trim() ? "typing" : "idle");
+                                props.onChange?.(event.target.value);
+                            }, style: {
+                                flex: 1,
+                                minHeight: 64,
+                                maxHeight: 180,
+                                padding: 0,
+                                overflowY: "auto",
+                                caretColor: tokens.color.brandPrimary,
+                            } }), _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [_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, opacity: props.disabled ? 0.4 : 1 } }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, 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(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": 24, 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: 40, height: 40, padding: 0, borderRadius: 999, fontSize: 24, lineHeight: "40px" }, children: "\u2191" })] })] })] })) : _jsxs("div", { style: {
                         display: "grid",
                         gridTemplateColumns: "32px minmax(0, 1fr) 32px 32px",
                         alignItems: "center",

package/lib/tokens/chatInputThemes.d.ts

@@ -1,6 +1,34 @@
-export type ChatInputThemeName = "pmate" | "cli" | "compact";
+export type ChatInputThemeName = "pmate" | "dark" | "cli" | "compact";
 export declare const chatInputThemes: {
     pmate: {};
+    dark: {
+        color: {
+            brandPrimary: string;
+            surfaceInputDefault: string;
+            surfaceInputFocus: string;
+            surfaceInputRecording: string;
+            surfaceInputError: string;
+            textPrimary: string;
+            textSecondary: string;
+            iconDefault: string;
+            iconActive: string;
+            actionSendDefault: string;
+            actionSendDisabled: string;
+            actionSendTextOnPrimary: string;
+            borderDefault: string;
+            borderFocus: string;
+            borderError: string;
+            statusError: string;
+            statusWarning: string;
+            statusSuccess: string;
+            voiceWaveformActive: string;
+            voiceWaveformBackground: string;
+        };
+        shadow: {
+            inputElevated: string;
+            recordingActive: string;
+        };
+    };
     cli: {
         color: {
             brandPrimary: string;

package/lib/tokens/chatInputThemes.js

@@ -1,5 +1,33 @@
 export const chatInputThemes = {
     pmate: {},
+    dark: {
+        color: {
+            brandPrimary: "#8B7CF6",
+            surfaceInputDefault: "#171C23",
+            surfaceInputFocus: "#1D242D",
+            surfaceInputRecording: "#202839",
+            surfaceInputError: "#2B191D",
+            textPrimary: "#EEF1F5",
+            textSecondary: "#8E98A5",
+            iconDefault: "#7E8996",
+            iconActive: "#A99FFF",
+            actionSendDefault: "#7C6FE6",
+            actionSendDisabled: "#343A48",
+            actionSendTextOnPrimary: "#FFFFFF",
+            borderDefault: "#303844",
+            borderFocus: "#665CBF",
+            borderError: "#A84D59",
+            statusError: "#FF7D87",
+            statusWarning: "#E5A85E",
+            statusSuccess: "#45D495",
+            voiceWaveformActive: "#A99FFF",
+            voiceWaveformBackground: "#3B365F",
+        },
+        shadow: {
+            inputElevated: "0 8px 24px rgba(0, 0, 0, 0.24)",
+            recordingActive: "0 0 0 4px rgba(139, 124, 246, 0.18)",
+        },
+    },
     cli: {
         color: {
             brandPrimary: "#25D6A0",

package/lib/types/chatInput.d.ts

@@ -110,6 +110,8 @@ export type ChatImageConfig = {
     uploadImage?: (file: File) => Promise<ChatImageUploadResult>;
 };
 export type ChatInputBaseProps = {
+    /** Use a taller composer with actions in a bottom toolbar. */
+    multiline?: boolean;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;

package/package.json

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