@pmate/chat-sdk 0.1.21 → 0.2.1

package/lib/components/ChatInputDesktop.js

@@ -168,8 +168,8 @@ function DesktopInner(props) {
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        width: 32,
-        height: 32,
+        width: tokens.sizing.desktopSideAction,
+        height: tokens.sizing.desktopSideAction,
         border: 0,
         borderRadius: 999,
         background: "transparent",
@@ -207,7 +207,7 @@ function DesktopInner(props) {
                         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, props.multiline ? (_jsxs(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
-                        minHeight: 144,
+                        minHeight: tokens.sizing.multilineMinHeight,
                         padding: "16px 18px 12px",
                         display: "flex",
                         flexDirection: "column",
@@ -227,12 +227,12 @@ function DesktopInner(props) {
                                 props.onChange?.(event.target.value);
                             }, style: {
                                 flex: 1,
-                                minHeight: 64,
-                                maxHeight: 180,
+                                minHeight: tokens.sizing.multilineTextMinHeight,
+                                maxHeight: tokens.sizing.multilineTextMaxHeight,
                                 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: () => {
+                            } }), _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [_jsx(MoreTrigger, { "data-icon-size": tokens.sizing.desktopIcon, 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") {
@@ -248,7 +248,7 @@ function DesktopInner(props) {
                                                 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: {
+                                            }, "aria-label": voice.status === "recording" ? "停止录音并转文字" : voice.status === "transcribing" ? "正在转写语音" : "开始语音输入", children: voice.status === "recording" ? _jsx(StopCircleOutlineIcon, { size: tokens.sizing.desktopIcon }) : _jsx(MicOutlineIcon, { size: tokens.sizing.desktopIcon, strokeWidth: 2 }) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": tokens.sizing.desktopIcon, 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: tokens.sizing.desktopSendAction, height: tokens.sizing.desktopSendAction, padding: 0, borderRadius: 999, fontSize: tokens.sizing.desktopSendIcon, lineHeight: `${tokens.sizing.desktopSendAction}px` }, children: "\u2191" })] })] })] })) : _jsxs("div", { style: {
                         display: "grid",
                         gridTemplateColumns: "32px minmax(0, 1fr) 32px 32px",
                         alignItems: "center",

package/lib/index.d.ts

@@ -14,7 +14,7 @@ export * from "./hooks/useAttachmentState";
 export * from "./hooks/useChatInputState";
 export * from "./hooks/useTranscriptComposer";
 export * from "./hooks/useVoiceInputController";
-export * from "./services/agentSdkASRClient";
+export * from "./services/functionASRClient";
 export * from "./services/authTokenResolver";
 export * from "./runtime/botAuth";
 export * from "./runtime/botKey";

package/lib/index.js

@@ -14,7 +14,7 @@ export * from "./hooks/useAttachmentState";
 export * from "./hooks/useChatInputState";
 export * from "./hooks/useTranscriptComposer";
 export * from "./hooks/useVoiceInputController";
-export * from "./services/agentSdkASRClient";
+export * from "./services/functionASRClient";
 export * from "./services/authTokenResolver";
 export * from "./runtime/botAuth";
 export * from "./runtime/botKey";

package/lib/services/{agentSdkASRClient.d.ts → functionASRClient.d.ts}

@@ -1,7 +1,7 @@
 import { AsyncStream } from "./AsyncStream";
-export type AgentSdkStreamLike = {
+export type FunctionStreamLike = {
     stream<TFinal = unknown, TChunk = Blob>(request: {
-        agentId: string;
+        functionId: string;
         stream: AsyncStream<TChunk>;
         params?: Record<string, unknown>;
         minChunkSizeBytes?: number;
@@ -9,17 +9,17 @@ export type AgentSdkStreamLike = {
         finish(): Promise<TFinal | null>;
     };
 };
-export type AgentSdkASRClientOptions = {
-    client: AgentSdkStreamLike;
-    agentId: string;
+export type FunctionASRClientOptions = {
+    client: FunctionStreamLike;
+    functionId: string;
     tokenResolver?: {
         getToken(): string;
     };
     minChunkSizeBytes?: number;
 };
-export declare class AgentSdkASRClient {
+export declare class FunctionASRClient {
     private readonly options;
-    constructor(options: AgentSdkASRClientOptions);
+    constructor(options: FunctionASRClientOptions);
     transcribe(blob: Blob, input?: {
         lang?: string;
     }): Promise<{

package/lib/services/{agentSdkASRClient.js → functionASRClient.js}

@@ -1,5 +1,5 @@
 import { AsyncStream } from "./AsyncStream";
-export class AgentSdkASRClient {
+export class FunctionASRClient {
     options;
     constructor(options) {
         this.options = options;
@@ -8,7 +8,7 @@ export class AgentSdkASRClient {
         const token = this.options.tokenResolver?.getToken() ?? "";
         const stream = new AsyncStream();
         const task = this.options.client.stream({
-            agentId: this.options.agentId,
+            functionId: this.options.functionId,
             stream,
             params: {
                 lang: input?.lang ?? "auto",

package/lib/tokens/chatInputThemes.d.ts

@@ -1,4 +1,4 @@
-export type ChatInputThemeName = "pmate" | "dark" | "cli" | "compact";
+export type ChatInputThemeName = "pmate" | "dark" | "issues" | "cli" | "compact";
 export declare const chatInputThemes: {
     pmate: {};
     dark: {
@@ -29,6 +29,77 @@ export declare const chatInputThemes: {
             recordingActive: string;
         };
     };
+    issues: {
+        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;
+        };
+        spacing: {
+            inputOuter: number;
+            inputInner: number;
+            actionGap: number;
+            desktopToolbarGap: number;
+        };
+        radius: {
+            inputSurface: number;
+            desktopInputSurface: number;
+            actionButton: number;
+        };
+        sizing: {
+            desktopIcon: number;
+            desktopSideAction: number;
+            desktopSendAction: number;
+            desktopSendIcon: number;
+            multilineMinHeight: number;
+            multilineTextMinHeight: number;
+            multilineTextMaxHeight: number;
+        };
+        shadow: {
+            inputElevated: string;
+        };
+        typography: {
+            familyBase: string;
+            familyMono: string;
+            inputText: {
+                size: number;
+                lineHeight: number;
+                weight: number;
+            };
+            statusHint: {
+                size: number;
+                lineHeight: number;
+                weight: number;
+            };
+            actionLabel: {
+                size: number;
+                lineHeight: number;
+                weight: number;
+            };
+            voiceHoldToTalk: {
+                size: number;
+                lineHeight: number;
+                weight: number;
+            };
+        };
+    };
     cli: {
         color: {
             brandPrimary: string;

package/lib/tokens/chatInputThemes.js

@@ -28,6 +28,50 @@ export const chatInputThemes = {
             recordingActive: "0 0 0 4px rgba(139, 124, 246, 0.18)",
         },
     },
+    issues: {
+        color: {
+            brandPrimary: "#8B7CF6",
+            surfaceInputDefault: "#171C23",
+            surfaceInputFocus: "#1D242D",
+            surfaceInputRecording: "#202839",
+            surfaceInputError: "#2B191D",
+            textPrimary: "#D7DCE3",
+            textSecondary: "#77818D",
+            iconDefault: "#737E8A",
+            iconActive: "#A99FFF",
+            actionSendDefault: "#4A5060",
+            actionSendDisabled: "#282E38",
+            actionSendTextOnPrimary: "#F3F5F8",
+            borderDefault: "#303844",
+            borderFocus: "#665CBF",
+            borderError: "#A84D59",
+            statusError: "#FF7D87",
+            statusWarning: "#E5A85E",
+            statusSuccess: "#45D495",
+            voiceWaveformActive: "#A99FFF",
+            voiceWaveformBackground: "#3B365F",
+        },
+        spacing: { inputOuter: 8, inputInner: 9, actionGap: 6, desktopToolbarGap: 6 },
+        radius: { inputSurface: 12, desktopInputSurface: 12, actionButton: 999 },
+        sizing: {
+            desktopIcon: 18,
+            desktopSideAction: 28,
+            desktopSendAction: 32,
+            desktopSendIcon: 18,
+            multilineMinHeight: 112,
+            multilineTextMinHeight: 46,
+            multilineTextMaxHeight: 144,
+        },
+        shadow: { inputElevated: "none" },
+        typography: {
+            familyBase: '"SF Mono", "JetBrains Mono", monospace',
+            familyMono: '"SF Mono", "JetBrains Mono", monospace',
+            inputText: { size: 13, lineHeight: 19, weight: 400 },
+            statusHint: { size: 10, lineHeight: 14, weight: 500 },
+            actionLabel: { size: 11, lineHeight: 15, weight: 600 },
+            voiceHoldToTalk: { size: 12, lineHeight: 17, weight: 600 },
+        },
+    },
     cli: {
         color: {
             brandPrimary: "#25D6A0",

package/lib/tokens/defaultTokens.js

@@ -49,6 +49,15 @@ export const defaultChatInputTokens = {
         inputElevated: "0 1px 2px rgba(15, 23, 42, 0.04)",
         recordingActive: "0 0 0 4px rgba(18, 184, 134, 0.14)",
     },
+    sizing: {
+        desktopIcon: 24,
+        desktopSideAction: 32,
+        desktopSendAction: 40,
+        desktopSendIcon: 24,
+        multilineMinHeight: 144,
+        multilineTextMinHeight: 64,
+        multilineTextMaxHeight: 180,
+    },
     typography: {
         familyBase: '"SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif',
         familyMono: '"SF Mono", "JetBrains Mono", monospace',
@@ -67,6 +76,7 @@ export function mergeChatInputTokens(overrides) {
         radius: { ...defaultChatInputTokens.radius, ...overrides?.radius },
         motion: { ...defaultChatInputTokens.motion, ...overrides?.motion },
         shadow: { ...defaultChatInputTokens.shadow, ...overrides?.shadow },
+        sizing: { ...defaultChatInputTokens.sizing, ...overrides?.sizing },
         typography: {
             ...defaultChatInputTokens.typography,
             ...overrides?.typography,

package/lib/types/chatInput.d.ts

@@ -56,6 +56,15 @@ export type ChatInputShadowTokens = {
     inputElevated: string;
     recordingActive: string;
 };
+export type ChatInputSizingTokens = {
+    desktopIcon: number;
+    desktopSideAction: number;
+    desktopSendAction: number;
+    desktopSendIcon: number;
+    multilineMinHeight: number;
+    multilineTextMinHeight: number;
+    multilineTextMaxHeight: number;
+};
 export type ChatInputTypographyScale = {
     size: number;
     lineHeight: number;
@@ -75,6 +84,7 @@ export type ChatInputTokens = {
     radius: ChatInputRadiusTokens;
     motion: ChatInputMotionTokens;
     shadow: ChatInputShadowTokens;
+    sizing: ChatInputSizingTokens;
     typography: ChatInputTypographyTokens;
 };
 export type ChatInputSlotProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmate/chat-sdk",
-  "version": "0.1.21",
+  "version": "0.2.1",
   "description": "Cross-platform PMate chat input components, voice input primitives, and ASR helpers",
   "type": "module",
   "main": "./lib/index.js",
@@ -29,10 +29,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "pnpm run clean && 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",
-    "@pmate/agent-sdk": "^1.1.2",
     "@msgpack/msgpack": "^3.1.2",
     "jotai": "^2.16.1"
   },
@@ -43,21 +51,15 @@
   "devDependencies": {
     "@storybook/addon-docs": "^9.0.17",
     "@storybook/react-vite": "9.0.17",
-    "@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",
+    "@tailwindcss/vite": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "rimraf": "^6.1.2",
     "storybook": "^9.0.17",
-    "tailwindcss": "^4.0.14",
+    "tailwindcss": "catalog:",
     "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"
   }
-}
+}

package/lib/recorder-processor.js

@@ -1,20 +0,0 @@
-class RecorderProcessor extends AudioWorkletProcessor {
-  process(inputs) {
-    const input = inputs[0]
-    if (!input || !input[0]) {
-      return true
-    }
-
-    const samples = input[0]
-    const pcm = new Int16Array(samples.length)
-    for (let i = 0; i < samples.length; i += 1) {
-      const sample = Math.max(-1, Math.min(1, samples[i]))
-      pcm[i] = sample < 0 ? sample * 0x8000 : sample * 0x7fff
-    }
-
-    this.port.postMessage({ type: "pcm", data: pcm.buffer }, [pcm.buffer])
-    return true
-  }
-}
-
-registerProcessor("pmate-mic-recorder-processor", RecorderProcessor)

package/lib/stories/ChatInput.stories.d.ts

@@ -1,15 +0,0 @@
-import type { StoryObj } from "@storybook/react-vite";
-declare const meta: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const MobileIdle: Story;
-export declare const MobileVoiceReady: Story;
-export declare const MobileRecording: Story;
-export declare const DesktopTyping: Story;
-export declare const DesktopAttachment: Story;
-export declare const WaveformActive: Story;

package/lib/stories/ChatInput.stories.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChatInputDesktop } from "../components/ChatInputDesktop";
-import { ChatInputMobile } from "../components/ChatInputMobile";
-import { WaveformFeedback } from "../components/WaveformFeedback";
-import { mergeChatInputTokens } from "../tokens/defaultTokens";
-const meta = {
-    title: "@pmate/chat-sdk/ChatInput",
-    parameters: {
-        layout: "centered",
-    },
-};
-export default meta;
-export const MobileIdle = {
-    render: () => _jsx("div", { style: { width: 360 }, children: _jsx(ChatInputMobile, {}) }),
-};
-export const MobileVoiceReady = {
-    render: () => (_jsx("div", { style: { width: 360 }, children: _jsx(ChatInputMobile, { initialState: { mode: "voice", status: "voice-mode-ready" } }) })),
-};
-export const MobileRecording = {
-    render: () => (_jsx("div", { style: { width: 360 }, children: _jsx(ChatInputMobile, { initialState: {
-                mode: "voice",
-                status: "recording",
-                waveformLevels: [0.25, 0.5, 0.88, 0.52, 0.28],
-            } }) })),
-};
-export const DesktopTyping = {
-    render: () => (_jsx("div", { style: { width: 720 }, children: _jsx(ChatInputDesktop, { initialState: { text: "Ship chat-sdk storybook first", status: "typing" } }) })),
-};
-export const DesktopAttachment = {
-    render: () => (_jsx("div", { style: { width: 720 }, children: _jsx(ChatInputDesktop, { initialState: {
-                text: "Desktop attachment state",
-                status: "attachment-selected",
-                attachments: [{ id: "1", kind: "image", name: "spec.png" }],
-            } }) })),
-};
-export const WaveformActive = {
-    render: () => (_jsx(WaveformFeedback, { levels: [0.2, 0.5, 0.9, 0.55, 0.3], tokens: mergeChatInputTokens() })),
-};

package/lib/tests/agentSdkASRClient.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tests/agentSdkASRClient.test.js

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { AgentSdkASRClient, } from "../services/agentSdkASRClient";
-describe("AgentSdkASRClient", () => {
-    it("streams audio blobs through agent-sdk and returns final text", async () => {
-        const seen = {
-            blobSizes: [],
-        };
-        const client = new AgentSdkASRClient({
-            client: {
-                stream(request) {
-                    seen.agentId = request.agentId;
-                    seen.lang = String(request.params?.lang ?? "");
-                    seen.token = String(request.params?.token ?? "");
-                    return {
-                        async finish() {
-                            for await (const chunk of request.stream) {
-                                seen.blobSizes.push(chunk.size);
-                            }
-                            return "transcribed text";
-                        },
-                    };
-                },
-            },
-            agentId: "agent:transcribe",
-            tokenResolver: {
-                getToken: () => "user-token",
-            },
-            minChunkSizeBytes: 0,
-        });
-        const result = await client.transcribe(new Blob(["voice-bytes"]), {
-            lang: "en",
-        });
-        expect(result.text).toBe("transcribed text");
-        expect(seen.agentId).toBe("agent:transcribe");
-        expect(seen.lang).toBe("en");
-        expect(seen.token).toBe("user-token");
-        expect(seen.blobSizes).toEqual([11]);
-    });
-});

package/lib/tests/defaultTokens.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tests/defaultTokens.test.js

@@ -1,16 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { defaultChatInputTokens, mergeChatInputTokens } from "../tokens/defaultTokens";
-describe("chat-sdk tokens", () => {
-    it("keeps purple brand as default", () => {
-        expect(defaultChatInputTokens.color.brandPrimary).toBe("#6D4AFF");
-    });
-    it("merges nested token overrides", () => {
-        const merged = mergeChatInputTokens({
-            color: {
-                brandPrimary: "#000000",
-            },
-        });
-        expect(merged.color.brandPrimary).toBe("#000000");
-        expect(merged.color.voiceWaveformActive).toBe(defaultChatInputTokens.color.voiceWaveformActive);
-    });
-});

package/lib/tests/transcriptComposer.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/tests/transcriptComposer.test.js

@@ -1,10 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { insertTranscriptText } from "../hooks/useTranscriptComposer";
-describe("insertTranscriptText", () => {
-    it("returns transcript when current text is empty", () => {
-        expect(insertTranscriptText("", "hello")).toBe("hello");
-    });
-    it("appends transcript to existing text", () => {
-        expect(insertTranscriptText("draft", "hello")).toBe("draft hello");
-    });
-});