@pmate/chat-sdk 0.1.5 → 0.1.7

package/dist/assets/iframe-q28pAgAa.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.border{border-style:var(--tw-border-style);border-width:1px}.uppercase{text-transform:uppercase}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/dist/assets/{index-u9_9PRd-.js → index-CkuJGuix.js}

@@ -1 +1 @@
-import{R as e}from"./iframe-fcxekwVB.js";import"./preload-helper-PPVm8Dsz.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function r(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{r as MDXProvider,u as useMDXComponents};
+import{R as e}from"./iframe-DVJDoCiO.js";import"./preload-helper-PPVm8Dsz.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function r(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{r as MDXProvider,u as useMDXComponents};

package/dist/assets/{react-18-DKDc3Hbl.js → react-18-DfLUnvSL.js}

@@ -1 +1 @@
-import{r as s}from"./iframe-fcxekwVB.js";import{c as l}from"./client-BG97-bzh.js";import"./preload-helper-PPVm8Dsz.js";var n=new Map;function m(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var a=({callback:e,children:r})=>{let t=s.useRef();return s.useLayoutEffect(()=>{t.current!==e&&(t.current=e,e())},[e]),r};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,r=null;return{promise:new Promise((t,o)=>{e=t,r=o}),resolve:e,reject:r}});var v=async(e,r,t)=>{let o=await c(r,t);if(m()){o.render(e);return}let{promise:i,resolve:u}=Promise.withResolvers();return o.render(s.createElement(a,{callback:u},e)),i},f=(e,r)=>{let t=n.get(e);t&&(t.unmount(),n.delete(e))},c=async(e,r)=>{let t=n.get(e);return t||(t=l.createRoot(e,r),n.set(e,t)),t};export{v as renderElement,f as unmountElement};
+import{r as s}from"./iframe-DVJDoCiO.js";import{c as l}from"./client-De2ACSn_.js";import"./preload-helper-PPVm8Dsz.js";var n=new Map;function m(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var a=({callback:e,children:r})=>{let t=s.useRef();return s.useLayoutEffect(()=>{t.current!==e&&(t.current=e,e())},[e]),r};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,r=null;return{promise:new Promise((t,o)=>{e=t,r=o}),resolve:e,reject:r}});var v=async(e,r,t)=>{let o=await c(r,t);if(m()){o.render(e);return}let{promise:i,resolve:u}=Promise.withResolvers();return o.render(s.createElement(a,{callback:u},e)),i},f=(e,r)=>{let t=n.get(e);t&&(t.unmount(),n.delete(e))},c=async(e,r)=>{let t=n.get(e);return t||(t=l.createRoot(e,r),n.set(e,t)),t};export{v as renderElement,f as unmountElement};

package/dist/iframe.html

@@ -529,9 +529,9 @@
   }
 </script>
 
-    <script type="module" crossorigin src="./assets/iframe-fcxekwVB.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-DVJDoCiO.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-PPVm8Dsz.js">
-    <link rel="stylesheet" crossorigin href="./assets/iframe-CWturJ6d.css">
+    <link rel="stylesheet" crossorigin href="./assets/iframe-q28pAgAa.css">
   </head>
 
   <body>

package/dist/index.json

@@ -1 +1 @@
-{"v":5,"entries":{"pmate-chat-sdk-chatinput--mobile-idle":{"type":"story","id":"pmate-chat-sdk-chatinput--mobile-idle","name":"Mobile Idle","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--mobile-voice-ready":{"type":"story","id":"pmate-chat-sdk-chatinput--mobile-voice-ready","name":"Mobile Voice Ready","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--mobile-recording":{"type":"story","id":"pmate-chat-sdk-chatinput--mobile-recording","name":"Mobile Recording","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--desktop-typing":{"type":"story","id":"pmate-chat-sdk-chatinput--desktop-typing","name":"Desktop Typing","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--desktop-attachment":{"type":"story","id":"pmate-chat-sdk-chatinput--desktop-attachment","name":"Desktop Attachment","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--waveform-active":{"type":"story","id":"pmate-chat-sdk-chatinput--waveform-active","name":"Waveform Active","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]}}}
+{"v":5,"entries":{"pmate-chat-sdk-chatinput--playground":{"type":"story","id":"pmate-chat-sdk-chatinput--playground","name":"Playground","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]}}}

package/dist/project.json

@@ -1 +1 @@
-{"generatedAt":1774594436837,"userSince":1774065191593,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{"vitest":"4.0.17"},"hasRouterPackage":false,"monorepo":"Turborepo","packageManager":{"type":"pnpm","version":"10.6.5","agent":"pnpm","nodeLinker":"undefined"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"9.1.17","language":"typescript","storybookPackages":{"@storybook/addon-docs":{"version":"9.1.17"},"@storybook/react-vite":{"version":"9.0.17"},"storybook":{"version":"9.1.17"}},"addons":{"$SNIP/node_modules/.pnpm/@storybook+addon-docs@9.1.17_@types+react@19.2.8_storybook@9.1.17_@testing-library+dom@_6282815dfd5a1a048c68a92ca86a2d86/node_modules/@storybook/addon-docs":{}}}
+{"generatedAt":1777466785658,"userSince":1774065191593,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{"vitest":"4.0.17"},"hasRouterPackage":false,"monorepo":"Turborepo","packageManager":{"type":"pnpm","version":"10.6.5","agent":"pnpm","nodeLinker":"undefined"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"9.1.17","language":"typescript","storybookPackages":{"@storybook/addon-docs":{"version":"9.1.17"},"@storybook/react-vite":{"version":"9.0.17"},"storybook":{"version":"9.1.17"}},"addons":{"$SNIP/node_modules/.pnpm/@storybook+addon-docs@9.1.17_@types+react@19.2.8_storybook@9.1.17_@testing-library+dom@_6282815dfd5a1a048c68a92ca86a2d86/node_modules/@storybook/addon-docs":{}}}

package/lib/components/AttachmentPreview.js

@@ -1,13 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 export function AttachmentPreview({ attachments, tokens, }) {
     if (attachments.length === 0) {
         return null;
     }
-    return (_jsx("div", { className: "flex flex-wrap", style: { gap: tokens.spacing.attachmentGap }, children: attachments.map((attachment) => (_jsx("span", { style: {
+    return (_jsx("div", { className: "flex flex-wrap", style: { gap: tokens.spacing.attachmentGap }, children: attachments.map((attachment) => (_jsxs("span", { style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
                 borderRadius: tokens.radius.attachmentPreview,
                 background: tokens.color.surfaceInputFocus,
                 color: tokens.color.textSecondary,
-                padding: "4px 10px",
-            }, title: attachment.url ?? attachment.name, children: attachment.name }, attachment.id))) }));
+                border: `1px solid ${tokens.color.borderDefault}`,
+                padding: "6px 10px",
+                fontSize: 12,
+                lineHeight: "16px",
+                fontFamily: tokens.typography.familyBase,
+                boxShadow: tokens.shadow.inputElevated,
+            }, title: attachment.url ?? attachment.name, children: [_jsx("span", { "aria-hidden": "true", style: {
+                        width: 6,
+                        height: 6,
+                        borderRadius: 999,
+                        background: attachment.kind === "image"
+                            ? tokens.color.iconActive
+                            : tokens.color.textSecondary,
+                        opacity: 0.9,
+                    } }), attachment.name] }, attachment.id))) }));
 }

package/lib/components/ChatInputDesktop.js

@@ -11,21 +11,23 @@ import { useVoiceInputController } from "../hooks/useVoiceInputController";
 import { AttachmentPreview } from "./AttachmentPreview";
 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";
-import { ImageOutlineIcon, MicOutlineIcon } from "./icons";
+import { FileOutlineIcon, ImageOutlineIcon, KeyboardOutlineIcon, MicOutlineIcon, } from "./icons";
 function DesktopInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
+    const [isMoreOpen, setIsMoreOpen] = useState(false);
     const [isUploadingImage, setIsUploadingImage] = useState(false);
     const textComposerRef = useRef(null);
     const emojiAnchorRef = useRef(null);
     const imageInputRef = useRef(null);
+    const fileInputRef = useRef(null);
     const voice = useVoiceInputController({
         ...props.voice,
         onVoiceSend: async (blob) => {
@@ -99,6 +101,13 @@ function DesktopInner(props) {
             setIsUploadingImage(false);
         }
     };
+    const handleFileAttachment = (file) => {
+        attachments.addAttachment({
+            kind: "file",
+            name: file.name,
+            file,
+        });
+    };
     const insertEmoji = (emoji) => {
         const textarea = textComposerRef.current;
         const start = textarea?.selectionStart ?? state.text.length;
@@ -113,53 +122,145 @@ function DesktopInner(props) {
             textarea?.setSelectionRange(caret, caret);
         });
     };
-    return (_jsx(InputSurface, { tokens: tokens, status: state.status, children: _jsxs("div", { className: "grid gap-3", style: { position: "relative" }, children: [_jsx("input", { ref: imageInputRef, type: "file", accept: props.image?.accept ?? "image/*", style: { display: "none" }, onChange: (event) => {
+    const attachmentActionStyle = {
+        display: "grid",
+        justifyItems: "center",
+        alignContent: "center",
+        gap: 7,
+        minWidth: 72,
+        minHeight: 78,
+        border: 0,
+        borderRadius: 18,
+        background: "transparent",
+        color: tokens.color.textSecondary,
+        cursor: "pointer",
+        fontSize: 12,
+        fontFamily: tokens.typography.familyBase,
+    };
+    const attachmentIconStyle = {
+        width: 52,
+        height: 52,
+        borderRadius: 16,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: tokens.color.surfaceInputDefault,
+        color: tokens.color.iconDefault,
+        border: `1px solid ${tokens.color.borderDefault}`,
+        boxShadow: "0 10px 26px rgba(0, 0, 0, 0.10)",
+    };
+    const sideActionStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 32,
+        height: 32,
+        border: 0,
+        borderRadius: 999,
+        background: "transparent",
+        color: tokens.color.iconDefault,
+        cursor: "pointer",
+        alignSelf: "center",
+        transition: `color ${tokens.motion.stateTransition}, transform ${tokens.motion.pressFeedback}`,
+    };
+    return (_jsx("div", { style: { position: "relative", width: "100%" }, children: _jsxs("div", { className: "grid gap-3", style: { position: "relative", width: "100%" }, children: [_jsx("input", { ref: imageInputRef, type: "file", accept: props.image?.accept ?? "image/*", style: { display: "none" }, onChange: (event) => {
                         const file = event.target.files?.[0];
                         if (file) {
                             void handleImageFile(file);
+                            setIsMoreOpen(false);
                         }
                         event.currentTarget.value = "";
-                    } }), _jsx(EmojiPicker, { open: isEmojiOpen, isMobile: false, anchorRef: emojiAnchorRef, onSelect: insertEmoji, onClose: () => setIsEmojiOpen(false) }), _jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, placeholder: "Message PMate", onChange: (event) => {
-                        state.setText(event.target.value);
-                        state.setStatus(event.target.value.trim() ? "typing" : "idle");
-                        props.onChange?.(event.target.value);
-                    } }), _jsx(AttachmentPreview, { attachments: attachments.attachments, tokens: tokens }), 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", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(EmojiTrigger, { ref: emojiAnchorRef, style: { color: "#616161" }, onClick: () => setIsEmojiOpen((prev) => !prev) }), _jsx("button", { type: "button", onClick: () => imageInputRef.current?.click(), style: {
-                                        display: "inline-flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        width: 32,
-                                        height: 32,
-                                        border: 0,
-                                        background: "transparent",
-                                        color: "#616161",
-                                        cursor: props.disabled || isUploadingImage ? "not-allowed" : "pointer",
-                                        opacity: props.disabled || isUploadingImage ? 0.4 : 1,
-                                    }, disabled: props.disabled || isUploadingImage, children: _jsx(ImageOutlineIcon, { size: 22 }) }), _jsx("button", { type: "button", onClick: () => {
-                                        if (props.disabled || props.enableVoice === false) {
-                                            return;
-                                        }
-                                        if (voice.status === "recording") {
-                                            voice.stopRecording("transcribe");
-                                            return;
+                    } }), _jsx("input", { ref: fileInputRef, type: "file", style: { display: "none" }, onChange: (event) => {
+                        const file = event.target.files?.[0];
+                        if (file) {
+                            handleFileAttachment(file);
+                            setIsMoreOpen(false);
+                        }
+                        event.currentTarget.value = "";
+                    } }), _jsx(EmojiPicker, { open: isEmojiOpen, isMobile: false, anchorRef: emojiAnchorRef, onSelect: insertEmoji, onClose: () => setIsEmojiOpen(false) }), _jsx(AttachmentPreview, { attachments: attachments.attachments, tokens: tokens }), isMoreOpen ? (_jsxs("div", { style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        bottom: 66,
+                        padding: "12px 14px",
+                        borderRadius: 24,
+                        background: `color-mix(in srgb, ${tokens.color.surfaceInputFocus} 94%, transparent)`,
+                        border: `1px solid ${tokens.color.borderDefault}`,
+                        display: "flex",
+                        gap: 12,
+                        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: {
+                        display: "grid",
+                        gridTemplateColumns: "32px minmax(0, 1fr) 32px 32px",
+                        alignItems: "center",
+                        gap: 6,
+                    }, children: [_jsx("button", { type: "button", onClick: () => {
+                                if (props.disabled || props.enableVoice === false) {
+                                    return;
+                                }
+                                if (voice.status === "recording") {
+                                    voice.stopRecording("transcribe");
+                                    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"
+                                ? "停止录音并转文字"
+                                : "开始语音输入", children: voice.status === "recording" ? (_jsx(KeyboardOutlineIcon, { size: 27 })) : (_jsx(MicOutlineIcon, { size: 24, strokeWidth: 2 })) }), _jsx(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
+                                minHeight: 52,
+                                padding: "0 14px",
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: _jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 1, placeholder: "Message PMate", onKeyDown: (event) => {
+                                    if (event.key !== "Enter") {
+                                        return;
+                                    }
+                                    const shouldSend = props.submitShortcut === "meta-enter" ? event.metaKey || event.ctrlKey : !event.shiftKey;
+                                    if (shouldSend) {
+                                        event.preventDefault();
+                                        if (state.text.trim() || state.attachments.length > 0) {
+                                            void onSend();
                                         }
-                                        voice.beginVoiceMode();
-                                        voice.startRecording();
-                                    }, style: {
-                                        display: "inline-flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        width: 32,
-                                        height: 32,
-                                        border: 0,
-                                        background: "transparent",
-                                        color: voice.status === "recording" || voice.status === "transcribing"
-                                            ? tokens.color.iconActive
-                                            : "#616161",
-                                        cursor: props.disabled || props.enableVoice === false ? "not-allowed" : "pointer",
-                                        opacity: props.disabled || props.enableVoice === false ? 0.4 : 1,
-                                    }, "aria-label": voice.status === "recording"
-                                        ? "停止录音并转文字"
-                                        : "开始语音输入", children: _jsx(MicOutlineIcon, { size: 22 }) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { style: { color: tokens.color.textSecondary, fontSize: 12 }, children: "Enter send / Shift+Enter newline" }), _jsx(SendAction, { tokens: tokens, disabled: props.disabled || (!state.text.trim() && state.attachments.length === 0), onClick: () => void onSend(), children: "Send" })] })] }), _jsx(StatusHint, { tokens: tokens, text: desktopStatusText, tone: state.error ? "error" : "secondary" })] }) }));
+                                    }
+                                }, onChange: (event) => {
+                                    state.setText(event.target.value);
+                                    state.setStatus(event.target.value.trim() ? "typing" : "idle");
+                                    props.onChange?.(event.target.value);
+                                }, style: {
+                                    minHeight: tokens.typography.inputText.lineHeight,
+                                    height: tokens.typography.inputText.lineHeight,
+                                    maxHeight: 128,
+                                    paddingTop: 0,
+                                    paddingBottom: 0,
+                                    display: "block",
+                                    overflow: "hidden",
+                                    caretColor: tokens.color.brandPrimary,
+                                } }) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": 24, style: {
+                                ...sideActionStyle,
+                                width: 32,
+                                height: 32,
+                            }, onClick: () => {
+                                setIsMoreOpen(false);
+                                setIsEmojiOpen((prev) => !prev);
+                            } }), _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,
+                                width: 32,
+                                height: 32,
+                                opacity: props.disabled ? 0.4 : 1,
+                            } })] }), _jsx(StatusHint, { tokens: tokens, text: desktopStatusText, tone: state.error ? "error" : "secondary" })] }) }));
 }
 export function ChatInputDesktop(props) {
     const stateKey = JSON.stringify({

package/lib/components/ChatInputMobile.js

@@ -13,25 +13,26 @@ import { AttachmentPreview } from "./AttachmentPreview";
 import { EmojiPicker } from "./EmojiPicker";
 import { EmojiTrigger } from "./EmojiTrigger";
 import { HoldToTalkButton } from "./HoldToTalkButton";
-import { ImageTrigger } from "./ImageTrigger";
+import { MoreTrigger } from "./ImageTrigger";
 import { InputSurface } from "./InputSurface";
-import { SendAction } from "./SendAction";
 import { StatusHint } from "./StatusHint";
 import { TextComposer } from "./TextComposer";
 import { WaveformFeedback } from "./WaveformFeedback";
-import { KeyboardOutlineIcon, MicOutlineIcon } from "./icons";
+import { FileOutlineIcon, ImageOutlineIcon, KeyboardOutlineIcon, MicOutlineIcon, } from "./icons";
 function MobileInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
     const [recordingChoice, setRecordingChoice] = useState("send");
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
+    const [isMoreOpen, setIsMoreOpen] = useState(false);
     const [isUploadingImage, setIsUploadingImage] = useState(false);
     const cancelZoneRef = useRef(null);
     const transcribeZoneRef = useRef(null);
     const textComposerRef = useRef(null);
     const emojiAnchorRef = useRef(null);
     const imageInputRef = useRef(null);
+    const fileInputRef = useRef(null);
     const voice = useVoiceInputController({
         ...props.voice,
         onVoiceSend: async (blob) => {
@@ -98,6 +99,13 @@ function MobileInner(props) {
             setIsUploadingImage(false);
         }
     };
+    const handleFileAttachment = (file) => {
+        attachments.addAttachment({
+            kind: "file",
+            name: file.name,
+            file,
+        });
+    };
     const isRecordingOverlayVisible = state.status === "recording" || state.status === "transcribing";
     const updateRecordingChoice = (clientX, clientY) => {
         const isInside = (node) => {
@@ -135,13 +143,55 @@ function MobileInner(props) {
             textarea?.setSelectionRange(caret, caret);
         });
     };
+    const attachmentActionStyle = {
+        display: "grid",
+        justifyItems: "center",
+        alignContent: "center",
+        gap: 7,
+        minWidth: 72,
+        minHeight: 78,
+        border: 0,
+        borderRadius: 18,
+        background: "transparent",
+        color: tokens.color.textSecondary,
+        cursor: "pointer",
+        fontSize: 12,
+        fontFamily: tokens.typography.familyBase,
+    };
+    const attachmentIconStyle = {
+        width: 52,
+        height: 52,
+        borderRadius: 16,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: tokens.color.surfaceInputDefault,
+        color: tokens.color.iconDefault,
+        border: `1px solid ${tokens.color.borderDefault}`,
+        boxShadow: "0 10px 26px rgba(0, 0, 0, 0.10)",
+    };
+    const sideActionStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 30,
+        height: 30,
+        border: 0,
+        borderRadius: 999,
+        background: "transparent",
+        color: tokens.color.iconDefault,
+        cursor: "pointer",
+        alignSelf: "center",
+        WebkitTapHighlightColor: "transparent",
+        transition: `color ${tokens.motion.stateTransition}, transform ${tokens.motion.pressFeedback}`,
+    };
     return (_jsxs("div", { style: {
             position: "relative",
             width: "100%",
-            maxWidth: 420,
+            maxWidth: "min(420px, calc(100vw - 16px))",
             padding: 0,
-            background: "#ECE9E3",
-            borderRadius: 0,
+            background: "transparent",
+            borderRadius: tokens.radius.inputSurface,
             border: 0,
             boxShadow: "none",
             overflow: "visible",
@@ -233,40 +283,67 @@ function MobileInner(props) {
                     const file = event.target.files?.[0];
                     if (file) {
                         void handleImageFile(file);
+                        setIsMoreOpen(false);
+                    }
+                    event.currentTarget.value = "";
+                } }), _jsx("input", { ref: fileInputRef, type: "file", style: { display: "none" }, onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    if (file) {
+                        handleFileAttachment(file);
+                        setIsMoreOpen(false);
                     }
                     event.currentTarget.value = "";
-                } }), _jsxs("div", { style: {
+                } }), isMoreOpen ? (_jsxs("div", { style: {
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    bottom: 64,
+                    padding: "12px 14px",
+                    borderRadius: 24,
+                    background: `color-mix(in srgb, ${tokens.color.surfaceInputFocus} 94%, transparent)`,
+                    border: `1px solid ${tokens.color.borderDefault}`,
+                    display: "flex",
+                    gap: 12,
+                    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, _jsxs("div", { style: {
                     position: "relative",
                     display: "grid",
-                    gridTemplateColumns: "28px minmax(0, 1fr) auto auto",
+                    gridTemplateColumns: "30px minmax(0, 1fr) 30px 30px",
                     gap: 4,
-                    alignItems: "end",
-                    padding: "4px 0 env(safe-area-inset-bottom, 0px)",
+                    alignItems: "center",
+                    padding: "0 0 env(safe-area-inset-bottom, 0px)",
                 }, children: [_jsx(EmojiPicker, { open: isEmojiOpen, isMobile: true, anchorRef: emojiAnchorRef, onSelect: insertEmoji, onClose: () => setIsEmojiOpen(false) }), _jsx("button", { type: "button", "aria-label": state.mode === "voice" ? "切换到文字输入" : "切换到语音输入", disabled: props.disabled || props.enableVoice === false, onClick: () => {
                             const next = state.mode === "voice" ? "text" : "voice";
                             state.setMode(next);
                             state.setStatus(next === "voice" ? "voice-mode-ready" : "idle");
                         }, style: {
-                            display: "inline-flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: 28,
-                            height: 28,
-                            border: 0,
-                            borderRadius: 999,
-                            background: "transparent",
-                            color: "#111111",
-                            cursor: "pointer",
-                            alignSelf: "center",
+                            ...sideActionStyle,
+                            color: state.mode === "voice"
+                                ? tokens.color.iconActive
+                                : tokens.color.iconDefault,
                             opacity: props.disabled ? 0.45 : 1,
-                        }, children: state.mode === "voice" ? _jsx(KeyboardOutlineIcon, { size: 24 }) : _jsx(MicOutlineIcon, { size: 24 }) }), _jsx(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
-                            borderRadius: 14,
-                            background: "#FFFFFF",
-                            borderColor: state.status === "error" ? tokens.color.borderError : "#E5E7EB",
-                            boxShadow: "none",
-                            minHeight: state.mode === "voice" ? 54 : 44,
+                        }, children: state.mode === "voice" ? (_jsx(KeyboardOutlineIcon, { size: 27 })) : (_jsx(MicOutlineIcon, { size: 24, strokeWidth: 2 })) }), _jsx(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
+                            borderRadius: tokens.radius.inputSurface,
+                            background: state.status === "error"
+                                ? tokens.color.surfaceInputError
+                                : state.status === "recording"
+                                    ? tokens.color.surfaceInputRecording
+                                    : tokens.color.surfaceInputDefault,
+                            borderColor: state.status === "error"
+                                ? tokens.color.borderError
+                                : state.status === "typing"
+                                    ? tokens.color.borderFocus
+                                    : tokens.color.borderDefault,
+                            boxShadow: state.status === "recording"
+                                ? tokens.shadow.recordingActive
+                                : tokens.shadow.inputElevated,
+                            minHeight: 48,
+                            display: "flex",
+                            alignItems: "center",
                             padding: state.mode === "voice" ? "0" : "0 12px",
-                        }, children: state.mode === "voice" ? (_jsx("div", { children: _jsx(HoldToTalkButton, { tokens: tokens, active: isRecordingOverlayVisible, disabled: props.disabled, text: "\u6309\u4F4F \u8BF4\u8BDD", activeText: "\u677E\u5F00 \u53D1\u9001", onPressStart: () => {
+                        }, children: state.mode === "voice" ? (_jsx("div", { style: { minHeight: 48 }, children: _jsx(HoldToTalkButton, { tokens: tokens, active: isRecordingOverlayVisible, disabled: props.disabled, text: "\u6309\u4F4F \u8BF4\u8BDD", activeText: "\u677E\u5F00 \u53D1\u9001", onPressStart: () => {
                                     setRecordingChoice("send");
                                     voice.startRecording();
                                 }, onPressMove: (event) => {
@@ -285,36 +362,47 @@ function MobileInner(props) {
                                 }, onPressCancel: () => {
                                     setRecordingChoice("send");
                                     voice.cancelRecording();
-                                } }) })) : (_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 1, placeholder: "\u53D1\u6D88\u606F", className: "placeholder:text-[#8A8A8E]", onChange: (event) => {
+                                } }) })) : (_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 1, wrap: "off", placeholder: "Message", enterKeyHint: "send", onKeyDown: (event) => {
+                                if (event.key === "Enter" && !event.shiftKey) {
+                                    event.preventDefault();
+                                    if (state.text.trim()) {
+                                        void onSend();
+                                    }
+                                }
+                            }, onChange: (event) => {
                                 state.setText(event.target.value);
                                 state.setStatus(event.target.value.trim() ? "typing" : "idle");
                                 props.onChange?.(event.target.value);
                             }, style: {
-                                minHeight: 18,
-                                paddingTop: 10,
-                                paddingBottom: 10,
-                                color: "#171717",
-                                fontSize: 16,
-                                lineHeight: "22px",
+                                minHeight: tokens.typography.inputText.lineHeight,
+                                height: tokens.typography.inputText.lineHeight,
+                                maxHeight: 92,
+                                paddingTop: 0,
+                                paddingBottom: 0,
+                                display: "block",
+                                overflow: "hidden",
+                                whiteSpace: "pre",
+                                color: tokens.color.textPrimary,
+                                fontSize: tokens.typography.inputText.size,
+                                lineHeight: `${tokens.typography.inputText.lineHeight}px`,
                                 caretColor: tokens.color.brandPrimary,
-                            } })) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": 24, onClick: () => setIsEmojiOpen((prev) => !prev), style: {
-                            color: "#111111",
-                            alignSelf: "center",
-                            width: 28,
-                            height: 28,
-                        } }), state.mode === "text" && state.text.trim() ? (_jsx(SendAction, { tokens: tokens, disabled: props.disabled, onClick: () => void onSend(), style: {
-                            minWidth: 64,
-                            minHeight: 30,
-                            borderRadius: 12,
-                            alignSelf: "center",
-                            padding: "0 12px",
-                        }, children: "\u53D1\u9001" })) : (_jsx(ImageTrigger, { "data-icon-size": 24, onClick: () => imageInputRef.current?.click(), disabled: props.disabled || isUploadingImage, style: {
-                            color: "#111111",
-                            alignSelf: "center",
-                            width: 28,
-                            height: 28,
-                            opacity: props.disabled || isUploadingImage ? 0.4 : 1,
-                        } }))] }), _jsx(StatusHint, { tokens: tokens, text: state.status === "recording" || state.status === "transcribing" ? undefined : statusText, tone: state.status === "error" ? "error" : "secondary" })] }));
+                            } })) }), _jsx(EmojiTrigger, { ref: emojiAnchorRef, "data-icon-size": 24, onClick: () => {
+                            setIsMoreOpen(false);
+                            setIsEmojiOpen((prev) => !prev);
+                        }, style: {
+                            ...sideActionStyle,
+                            width: 30,
+                            height: 30,
+                        } }), _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,
+                            width: 30,
+                            height: 30,
+                            opacity: props.disabled ? 0.4 : 1,
+                        } })] }), _jsx(StatusHint, { tokens: tokens, text: state.status === "recording" || state.status === "transcribing" ? undefined : statusText, tone: state.status === "error" ? "error" : "secondary" })] }));
 }
 export function ChatInputMobile(props) {
     const stateKey = JSON.stringify({