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