@pmate/chat-sdk 0.1.6 → 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/tokens/chatInputThemes.js

@@ -2,20 +2,20 @@ export const chatInputThemes = {
     pmate: {},
     cli: {
         color: {
-            brandPrimary: "#15D49A",
-            surfaceInputDefault: "#07110E",
-            surfaceInputFocus: "#0C1B16",
-            surfaceInputRecording: "#0F251E",
+            brandPrimary: "#25D6A0",
+            surfaceInputDefault: "#0B1512",
+            surfaceInputFocus: "#10201A",
+            surfaceInputRecording: "#132A22",
             surfaceInputError: "#251111",
-            textPrimary: "#E8FFF5",
-            textSecondary: "#79A996",
-            iconDefault: "#8DB7A7",
-            iconActive: "#15D49A",
-            actionSendDefault: "#15D49A",
+            textPrimary: "#ECFFF7",
+            textSecondary: "#8CB6A8",
+            iconDefault: "#A4C7BA",
+            iconActive: "#25D6A0",
+            actionSendDefault: "#25D6A0",
             actionSendDisabled: "#23483B",
             actionSendTextOnPrimary: "#06100D",
-            borderDefault: "#1A3A30",
-            borderFocus: "#15D49A",
+            borderDefault: "#263F37",
+            borderFocus: "#3A715F",
             borderError: "#D66B6B",
             statusError: "#FF8A8A",
             statusWarning: "#E0B256",
@@ -24,9 +24,9 @@ export const chatInputThemes = {
             voiceWaveformBackground: "#214A3C",
         },
         spacing: {
-            inputOuter: 10,
+            inputOuter: 8,
             inputInner: 10,
-            actionGap: 8,
+            actionGap: 10,
             attachmentGap: 8,
             voiceWaveformGap: 4,
             mobileTouchInset: 10,
@@ -34,16 +34,16 @@ export const chatInputThemes = {
             statusHintTop: 6,
         },
         radius: {
-            inputSurface: 8,
-            actionButton: 6,
-            attachmentPreview: 6,
+            inputSurface: 14,
+            actionButton: 18,
+            attachmentPreview: 10,
             waveformBar: 2,
-            mobileHoldToTalk: 6,
-            desktopInputSurface: 8,
+            mobileHoldToTalk: 14,
+            desktopInputSurface: 14,
         },
         shadow: {
-            inputElevated: "0 0 0 1px rgba(21, 212, 154, 0.10)",
-            recordingActive: "0 0 0 2px rgba(21, 212, 154, 0.28)",
+            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',

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.6",
+  "version": "0.1.7",
   "description": "Cross-platform PMate chat input components, voice input primitives, and ASR helpers",
   "type": "module",
   "main": "./lib/index.js",