@pmate/chat-sdk 0.1.5 → 0.1.7

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,10 @@ 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 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,15 @@ 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 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;
 };

package/lib/index.d.ts

@@ -17,6 +17,7 @@ export * from "./hooks/useVoiceInputController";
 export * from "./services/agentSdkASRClient";
 export * from "./services/authTokenResolver";
 export * from "./tokens/defaultTokens";
+export * from "./tokens/chatInputThemes";
 export * from "./types/attachment";
 export * from "./types/chatInput";
 export * from "./types/voice";

package/lib/index.js

@@ -17,6 +17,7 @@ export * from "./hooks/useVoiceInputController";
 export * from "./services/agentSdkASRClient";
 export * from "./services/authTokenResolver";
 export * from "./tokens/defaultTokens";
+export * from "./tokens/chatInputThemes";
 export * from "./types/attachment";
 export * from "./types/chatInput";
 export * from "./types/voice";

package/lib/tokens/chatInputThemes.d.ts

@@ -0,0 +1,110 @@
+export type ChatInputThemeName = "pmate" | "cli" | "compact";
+export declare const chatInputThemes: {
+    pmate: {};
+    cli: {
+        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;
+            attachmentGap: number;
+            voiceWaveformGap: number;
+            mobileTouchInset: number;
+            desktopToolbarGap: number;
+            statusHintTop: number;
+        };
+        radius: {
+            inputSurface: number;
+            actionButton: number;
+            attachmentPreview: number;
+            waveformBar: number;
+            mobileHoldToTalk: number;
+            desktopInputSurface: number;
+        };
+        shadow: {
+            inputElevated: string;
+            recordingActive: 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;
+            };
+        };
+    };
+    compact: {
+        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;
+        };
+        radius: {
+            inputSurface: number;
+            actionButton: number;
+            attachmentPreview: number;
+            waveformBar: number;
+            mobileHoldToTalk: number;
+            desktopInputSurface: number;
+        };
+        shadow: {
+            inputElevated: string;
+            recordingActive: string;
+        };
+    };
+};

package/lib/tokens/chatInputThemes.js

@@ -0,0 +1,93 @@
+export const chatInputThemes = {
+    pmate: {},
+    cli: {
+        color: {
+            brandPrimary: "#25D6A0",
+            surfaceInputDefault: "#0B1512",
+            surfaceInputFocus: "#10201A",
+            surfaceInputRecording: "#132A22",
+            surfaceInputError: "#251111",
+            textPrimary: "#ECFFF7",
+            textSecondary: "#8CB6A8",
+            iconDefault: "#A4C7BA",
+            iconActive: "#25D6A0",
+            actionSendDefault: "#25D6A0",
+            actionSendDisabled: "#23483B",
+            actionSendTextOnPrimary: "#06100D",
+            borderDefault: "#263F37",
+            borderFocus: "#3A715F",
+            borderError: "#D66B6B",
+            statusError: "#FF8A8A",
+            statusWarning: "#E0B256",
+            statusSuccess: "#15D49A",
+            voiceWaveformActive: "#15D49A",
+            voiceWaveformBackground: "#214A3C",
+        },
+        spacing: {
+            inputOuter: 8,
+            inputInner: 10,
+            actionGap: 10,
+            attachmentGap: 8,
+            voiceWaveformGap: 4,
+            mobileTouchInset: 10,
+            desktopToolbarGap: 10,
+            statusHintTop: 6,
+        },
+        radius: {
+            inputSurface: 14,
+            actionButton: 18,
+            attachmentPreview: 10,
+            waveformBar: 2,
+            mobileHoldToTalk: 14,
+            desktopInputSurface: 14,
+        },
+        shadow: {
+            inputElevated: "0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.18)",
+            recordingActive: "0 0 0 4px rgba(37, 214, 160, 0.16)",
+        },
+        typography: {
+            familyBase: '"SF Mono", "JetBrains Mono", monospace',
+            familyMono: '"SF Mono", "JetBrains Mono", monospace',
+            inputText: { size: 14, lineHeight: 20, weight: 500 },
+            statusHint: { size: 11, lineHeight: 16, weight: 500 },
+            actionLabel: { size: 12, lineHeight: 16, weight: 700 },
+            voiceHoldToTalk: { size: 13, lineHeight: 18, weight: 700 },
+        },
+    },
+    compact: {
+        color: {
+            brandPrimary: "#0EA5E9",
+            surfaceInputDefault: "#F8FAFC",
+            surfaceInputFocus: "#F0F9FF",
+            surfaceInputRecording: "#E0F2FE",
+            surfaceInputError: "#FFF1F2",
+            textPrimary: "#0F172A",
+            textSecondary: "#64748B",
+            iconDefault: "#475569",
+            iconActive: "#0284C7",
+            actionSendDefault: "#0F172A",
+            actionSendDisabled: "#CBD5E1",
+            actionSendTextOnPrimary: "#FFFFFF",
+            borderDefault: "#CBD5E1",
+            borderFocus: "#7DD3FC",
+            borderError: "#FDA4AF",
+            statusError: "#E11D48",
+            statusWarning: "#B45309",
+            statusSuccess: "#047857",
+            voiceWaveformActive: "#0284C7",
+            voiceWaveformBackground: "#BAE6FD",
+        },
+        radius: {
+            inputSurface: 10,
+            actionButton: 8,
+            attachmentPreview: 8,
+            waveformBar: 999,
+            mobileHoldToTalk: 10,
+            desktopInputSurface: 10,
+        },
+        shadow: {
+            inputElevated: "none",
+            recordingActive: "0 0 0 3px rgba(14, 165, 233, 0.16)",
+        },
+    },
+};

package/lib/tokens/defaultTokens.js

@@ -1,25 +1,25 @@
 export const defaultChatInputTokens = {
     color: {
-        brandPrimary: "#6D4AFF",
+        brandPrimary: "#12B886",
         surfaceInputDefault: "#FFFFFF",
-        surfaceInputFocus: "#F7F4FF",
-        surfaceInputRecording: "#EEE7FF",
+        surfaceInputFocus: "#F4F7F6",
+        surfaceInputRecording: "#E9F8F1",
         surfaceInputError: "#FFF1F3",
-        textPrimary: "#1F1637",
-        textSecondary: "#6F6790",
-        iconDefault: "#6F6790",
-        iconActive: "#6D4AFF",
-        actionSendDefault: "#6D4AFF",
-        actionSendDisabled: "#CFC6F6",
+        textPrimary: "#18211E",
+        textSecondary: "#65736E",
+        iconDefault: "#3F4A46",
+        iconActive: "#12B886",
+        actionSendDefault: "#12B886",
+        actionSendDisabled: "#B9D9CF",
         actionSendTextOnPrimary: "#FFFFFF",
-        borderDefault: "#E6E0F7",
-        borderFocus: "#B9A8FF",
+        borderDefault: "#DCE6E2",
+        borderFocus: "#8EDBC3",
         borderError: "#F2A7B5",
         statusError: "#D14363",
         statusWarning: "#D98E04",
         statusSuccess: "#2E9B62",
-        voiceWaveformActive: "#7C5CFF",
-        voiceWaveformBackground: "#DCD2FF",
+        voiceWaveformActive: "#12B886",
+        voiceWaveformBackground: "#CFEFE3",
     },
     spacing: {
         inputOuter: 12,
@@ -32,8 +32,8 @@ export const defaultChatInputTokens = {
         statusHintTop: 6,
     },
     radius: {
-        inputSurface: 20,
-        actionButton: 16,
+        inputSurface: 16,
+        actionButton: 18,
         attachmentPreview: 14,
         waveformBar: 999,
         mobileHoldToTalk: 18,
@@ -46,8 +46,8 @@ export const defaultChatInputTokens = {
         transcribingLoading: "900ms linear infinite",
     },
     shadow: {
-        inputElevated: "0 6px 24px rgba(95, 70, 180, 0.08)",
-        recordingActive: "0 0 0 4px rgba(109, 74, 255, 0.14)",
+        inputElevated: "0 1px 2px rgba(15, 23, 42, 0.04)",
+        recordingActive: "0 0 0 4px rgba(18, 184, 134, 0.14)",
     },
     typography: {
         familyBase: '"SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif',

package/lib/types/attachment.d.ts

@@ -1,7 +1,7 @@
 export type ChatAttachment = {
     id: string;
     name: string;
-    kind: "image";
+    kind: "image" | "file";
     file?: File;
     url?: string;
     previewUrl?: string;

package/package.json

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