@pmate/chat-sdk 0.2.3 → 0.3.0

package/dist/assets/{react-18-CVKdgGic.js → react-18-6BKf31wF.js}

@@ -1 +1 @@
-import{r as s}from"./iframe-Bo_J3UyC.js";import{c as l}from"./client-CMlGEQEC.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-1QrxCBqr.js";import{c as l}from"./client-DTiYOHAb.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,7 +529,7 @@
   }
 </script>
 
-    <script type="module" crossorigin src="./assets/iframe-Bo_J3UyC.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-1QrxCBqr.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-PPVm8Dsz.js">
     <link rel="stylesheet" crossorigin href="./assets/iframe-4FbYaDjf.css">
   </head>

package/dist/index.html

@@ -127,7 +127,7 @@
         
       
         
-          window['STORYBOOK_FRAMEWORK'] = "/Users/ramroll/dev/pmate/pmate-mono/node_modules/.pnpm/@storybook+react-vite@9.0.17_react-dom@19.2.3_react@19.2.3__react@19.2.3_rollup@4.54.0__90095e863266ef31e7a8a2925998abad/node_modules/@storybook/react-vite";
+          window['STORYBOOK_FRAMEWORK'] = "/Users/ramroll/dev/pmate-envs/pmate-mono-9/node_modules/.pnpm/@storybook+react-vite@9.0.17_react-dom@19.2.3_react@19.2.3__react@19.2.3_rollup@4.54.0__90095e863266ef31e7a8a2925998abad/node_modules/@storybook/react-vite";
         
       
     </script>

package/dist/index.json

@@ -1 +1 @@
-{"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"]},"pmate-chat-sdk-chatinput--desktop-multiline":{"type":"story","id":"pmate-chat-sdk-chatinput--desktop-multiline","name":"Desktop Multiline","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"]},"pmate-chat-sdk-chatinput--desktop-multiline":{"type":"story","id":"pmate-chat-sdk-chatinput--desktop-multiline","name":"Desktop Multiline","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--group-mentions":{"type":"story","id":"pmate-chat-sdk-chatinput--group-mentions","name":"Group Mentions","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--mobile-group-mentions":{"type":"story","id":"pmate-chat-sdk-chatinput--mobile-group-mentions","name":"Mobile Group Mentions","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]},"pmate-chat-sdk-chatinput--dark-group-mentions":{"type":"story","id":"pmate-chat-sdk-chatinput--dark-group-mentions","name":"Dark Group Mentions","title":"@pmate/chat-sdk/ChatInput","importPath":"./src/stories/ChatInput.stories.tsx","tags":["dev","test"]}}}

package/dist/project.json

@@ -1 +1 @@
-{"generatedAt":1787881497340,"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":1791336224560,"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/ChatInputDesktop.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMentions } from "../hooks/useMentions";
+import { MentionMenu } from "./MentionMenu";
 import React from "react";
 import { Provider, createStore } from "jotai";
 import { useEffect, useRef, useState } from "react";
@@ -22,6 +24,10 @@ function DesktopInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
+    const mentions = useMentions({
+        value: state.text, config: props.mentions, disabled: props.disabled || state.status === "sending" || state.mode === "voice",
+        onChange(value) { state.setText(value); state.setStatus(value.trim() ? "typing" : "idle"); props.onChange?.(value); },
+    });
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
     const [isMoreOpen, setIsMoreOpen] = useState(false);
     const [isUploadingImage, setIsUploadingImage] = useState(false);
@@ -66,6 +72,7 @@ function DesktopInner(props) {
         state.setStatus("sending");
         await props.onSend({
             text: state.text,
+            mentions: mentions.getMentions(),
             attachments: state.attachments,
             transcript: state.transcript || undefined,
         });
@@ -178,153 +185,151 @@ function DesktopInner(props) {
         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("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, onRemove: attachments.removeAttachment }), isMoreOpen ? (_jsxs("div", { style: {
-                        position: "absolute",
-                        left: 0,
-                        right: 0,
-                        bottom: props.multiline ? 154 : 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, props.multiline ? (_jsxs(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
-                        minHeight: tokens.sizing.multilineMinHeight,
-                        padding: "16px 18px 12px",
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 12,
-                    }, children: [_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 3, placeholder: "Message PMate", onPaste: handlePaste, onDrop: props.onDrop, onKeyDown: (event) => {
-                                if (event.key !== "Enter" ||
-                                    event.shiftKey ||
-                                    event.nativeEvent.isComposing ||
-                                    event.keyCode === 229)
-                                    return;
-                                event.preventDefault();
-                                if (state.text.trim() || state.attachments.length > 0)
-                                    void onSend();
-                            }, onChange: (event) => {
-                                state.setText(event.target.value);
-                                state.setStatus(event.target.value.trim() ? "typing" : "idle");
-                                props.onChange?.(event.target.value);
-                            }, style: {
-                                flex: 1,
-                                minHeight: 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": 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") {
-                                                    voice.stopRecording("transcribe");
-                                                    return;
-                                                }
-                                                if (voice.status === "transcribing")
-                                                    return;
-                                                voice.beginVoiceMode();
-                                                voice.startRecording();
-                                            }, style: {
-                                                ...sideActionStyle,
-                                                color: voice.status === "recording" || voice.status === "transcribing" ? tokens.color.iconActive : tokens.color.iconDefault,
-                                                cursor: props.disabled || props.enableVoice === false ? "not-allowed" : "pointer",
-                                                opacity: props.disabled || props.enableVoice === false ? 0.4 : 1,
-                                            }, "aria-label": voice.status === "recording" ? "停止录音并转文字" : voice.status === "transcribing" ? "正在转写语音" : "开始语音输入", children: voice.status === "recording" ? _jsx(StopCircleOutlineIcon, { size: 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",
-                        gap: 6,
-                    }, children: [_jsx("button", { type: "button", onClick: () => {
-                                if (props.disabled || props.enableVoice === false) {
-                                    return;
-                                }
-                                if (voice.status === "recording") {
-                                    voice.stopRecording("transcribe");
-                                    return;
-                                }
-                                if (voice.status === "transcribing") {
-                                    return;
-                                }
-                                voice.beginVoiceMode();
-                                voice.startRecording();
-                            }, style: {
-                                ...sideActionStyle,
-                                color: voice.status === "recording" || voice.status === "transcribing"
-                                    ? tokens.color.iconActive
-                                    : tokens.color.iconDefault,
-                                cursor: props.disabled || props.enableVoice === false ? "not-allowed" : "pointer",
-                                opacity: props.disabled || props.enableVoice === false ? 0.4 : 1,
-                            }, "aria-label": voice.status === "recording"
-                                ? "停止录音并转文字"
-                                : voice.status === "transcribing"
-                                    ? "正在转写语音"
-                                    : "开始语音输入", children: voice.status === "recording" ? (_jsx(StopCircleOutlineIcon, { size: 27 })) : (_jsx(MicOutlineIcon, { size: 24, strokeWidth: 2 })) }), _jsx(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", onPaste: handlePaste, onDrop: props.onDrop, onKeyDown: (event) => {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [_jsx(MentionMenu, { ...mentions.menuProps, tokens: tokens }), _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("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, onRemove: attachments.removeAttachment }), isMoreOpen ? (_jsxs("div", { style: {
+                            position: "absolute",
+                            left: 0,
+                            right: 0,
+                            bottom: props.multiline ? 154 : 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, props.multiline ? (_jsxs(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
+                            minHeight: tokens.sizing.multilineMinHeight,
+                            padding: "16px 18px 12px",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 12,
+                        }, children: [_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, ...mentions.inputProps, disabled: props.disabled || state.status === "sending", value: state.text, rows: 3, placeholder: "Message PMate", onPaste: handlePaste, onDrop: props.onDrop, onKeyDown: (event) => {
+                                    mentions.inputProps.onKeyDown(event);
+                                    if (event.defaultPrevented)
+                                        return;
                                     if (event.key !== "Enter" ||
+                                        event.shiftKey ||
                                         event.nativeEvent.isComposing ||
-                                        event.keyCode === 229) {
+                                        event.keyCode === 229)
+                                        return;
+                                    event.preventDefault();
+                                    if (state.text.trim() || state.attachments.length > 0)
+                                        void onSend();
+                                }, style: {
+                                    flex: 1,
+                                    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": 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") {
+                                                        voice.stopRecording("transcribe");
+                                                        return;
+                                                    }
+                                                    if (voice.status === "transcribing")
+                                                        return;
+                                                    voice.beginVoiceMode();
+                                                    voice.startRecording();
+                                                }, style: {
+                                                    ...sideActionStyle,
+                                                    color: voice.status === "recording" || voice.status === "transcribing" ? tokens.color.iconActive : tokens.color.iconDefault,
+                                                    cursor: props.disabled || props.enableVoice === false ? "not-allowed" : "pointer",
+                                                    opacity: props.disabled || props.enableVoice === false ? 0.4 : 1,
+                                                }, "aria-label": voice.status === "recording" ? "停止录音并转文字" : voice.status === "transcribing" ? "正在转写语音" : "开始语音输入", children: voice.status === "recording" ? _jsx(StopCircleOutlineIcon, { size: 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",
+                            gap: 6,
+                        }, children: [_jsx("button", { type: "button", onClick: () => {
+                                    if (props.disabled || props.enableVoice === false) {
                                         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();
-                                        }
+                                    if (voice.status === "recording") {
+                                        voice.stopRecording("transcribe");
+                                        return;
+                                    }
+                                    if (voice.status === "transcribing") {
+                                        return;
                                     }
-                                }, onChange: (event) => {
-                                    state.setText(event.target.value);
-                                    state.setStatus(event.target.value.trim() ? "typing" : "idle");
-                                    props.onChange?.(event.target.value);
+                                    voice.beginVoiceMode();
+                                    voice.startRecording();
                                 }, 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" })] }) }));
+                                    ...sideActionStyle,
+                                    color: voice.status === "recording" || voice.status === "transcribing"
+                                        ? tokens.color.iconActive
+                                        : tokens.color.iconDefault,
+                                    cursor: props.disabled || props.enableVoice === false ? "not-allowed" : "pointer",
+                                    opacity: props.disabled || props.enableVoice === false ? 0.4 : 1,
+                                }, "aria-label": voice.status === "recording"
+                                    ? "停止录音并转文字"
+                                    : voice.status === "transcribing"
+                                        ? "正在转写语音"
+                                        : "开始语音输入", children: voice.status === "recording" ? (_jsx(StopCircleOutlineIcon, { size: 27 })) : (_jsx(MicOutlineIcon, { size: 24, strokeWidth: 2 })) }), _jsx(InputSurface, { tokens: tokens, status: state.status, styleOverride: {
+                                    minHeight: 52,
+                                    padding: "0 14px",
+                                    display: "flex",
+                                    alignItems: "center",
+                                }, children: _jsx(TextComposer, { ref: textComposerRef, tokens: tokens, ...mentions.inputProps, disabled: props.disabled || state.status === "sending", value: state.text, rows: 1, placeholder: "Message PMate", onPaste: handlePaste, onDrop: props.onDrop, onKeyDown: (event) => {
+                                        mentions.inputProps.onKeyDown(event);
+                                        if (event.defaultPrevented)
+                                            return;
+                                        if (event.key !== "Enter" ||
+                                            event.nativeEvent.isComposing ||
+                                            event.keyCode === 229) {
+                                            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();
+                                            }
+                                        }
+                                    }, 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

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMentions } from "../hooks/useMentions";
+import { MentionMenu } from "./MentionMenu";
 import React from "react";
 import { Provider, createStore } from "jotai";
 import { useEffect, useRef, useState } from "react";
@@ -23,6 +25,10 @@ function MobileInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
+    const mentions = useMentions({
+        value: state.text, config: props.mentions, disabled: props.disabled || state.status === "sending" || state.mode === "voice",
+        onChange(value) { state.setText(value); state.setStatus(value.trim() ? "typing" : "idle"); props.onChange?.(value); },
+    });
     const [recordingChoice, setRecordingChoice] = useState("send");
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
     const [isMoreOpen, setIsMoreOpen] = useState(false);
@@ -69,6 +75,7 @@ function MobileInner(props) {
         state.setStatus("sending");
         await props.onSend({
             text: state.text,
+            mentions: mentions.getMentions(),
             attachments: state.attachments,
             transcript: state.transcript || undefined,
             mode: "text",
@@ -264,7 +271,7 @@ function MobileInner(props) {
             userSelect: "none",
             WebkitUserSelect: "none",
             WebkitTouchCallout: "none",
-        }, children: [isRecordingOverlayVisible ? (_jsxs("div", { style: {
+        }, children: [_jsx(MentionMenu, { ...mentions.menuProps, tokens: tokens }), isRecordingOverlayVisible ? (_jsxs("div", { style: {
                     position: "fixed",
                     left: "50%",
                     bottom: "calc(72px + env(safe-area-inset-bottom, 0px))",
@@ -552,7 +559,10 @@ function MobileInner(props) {
                                 }, onPressCancel: () => {
                                     setRecordingChoice("send");
                                     voice.cancelRecording();
-                                } }) })) : (_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, value: state.text, rows: 1, wrap: "off", placeholder: "Message", enterKeyHint: "send", onPaste: handlePaste, onDrop: props.onDrop, onKeyDown: (event) => {
+                                } }) })) : (_jsx(TextComposer, { ref: textComposerRef, tokens: tokens, ...mentions.inputProps, disabled: props.disabled || state.status === "sending", value: state.text, rows: 1, wrap: "off", placeholder: "Message", enterKeyHint: "send", onPaste: handlePaste, onDrop: props.onDrop, onKeyDown: (event) => {
+                                mentions.inputProps.onKeyDown(event);
+                                if (event.defaultPrevented)
+                                    return;
                                 if (event.key === "Enter" &&
                                     !event.shiftKey &&
                                     !event.nativeEvent.isComposing &&
@@ -562,10 +572,6 @@ function MobileInner(props) {
                                         void onSend();
                                     }
                                 }
-                            }, 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,

package/lib/components/MentionMenu.d.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from "react";
+import type { ChatInputTokens, DeepPartial } from "../types/chatInput";
+import type { MentionCandidate } from "../mentions/model";
+export declare function MentionMenu({ id, open, candidates, activeIndex, onSelect, onActiveIndex, menuRef, label, emptyText, tokens: overrides }: {
+    id: string;
+    open: boolean;
+    candidates: MentionCandidate[];
+    activeIndex: number;
+    onSelect: (candidate: MentionCandidate) => void;
+    onActiveIndex: (index: number) => void;
+    menuRef: RefObject<HTMLDivElement | null>;
+    label: string;
+    emptyText: string;
+    tokens?: DeepPartial<ChatInputTokens>;
+}): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/MentionMenu.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { mergeChatInputTokens } from "../tokens/defaultTokens";
+export function MentionMenu({ id, open, candidates, activeIndex, onSelect, onActiveIndex, menuRef, label, emptyText, tokens: overrides }) {
+    const tokens = mergeChatInputTokens(overrides);
+    useEffect(() => {
+        menuRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex, open]);
+    if (!open)
+        return null;
+    return _jsx("div", { ref: menuRef, id: id, role: "listbox", "aria-label": label, style: {
+            position: "absolute", bottom: "calc(100% + 8px)", left: 0, width: "min(360px, 100%)", maxHeight: "min(280px, 40dvh)", overflowY: "auto", overscrollBehavior: "contain", zIndex: 20,
+            boxSizing: "border-box", padding: 6, borderRadius: tokens.radius.inputSurface, border: `1px solid ${tokens.color.borderDefault}`,
+            background: tokens.color.surfaceInputFocus, color: tokens.color.textPrimary, boxShadow: tokens.shadow.inputElevated, fontFamily: tokens.typography.familyBase,
+        }, children: candidates.length ? candidates.map((candidate, index) => _jsxs("button", { id: `${id}-${index}`, role: "option", "aria-selected": index === activeIndex, tabIndex: -1, type: "button", onMouseDown: event => event.preventDefault(), onMouseMove: () => onActiveIndex(index), onClick: () => onSelect(candidate), style: { display: "flex", alignItems: "center", gap: 10, width: "100%", minHeight: 44, padding: "8px 10px", border: 0, borderRadius: 8, textAlign: "left", cursor: "pointer", color: "inherit", background: index === activeIndex ? `color-mix(in srgb, ${tokens.color.brandPrimary} 14%, ${tokens.color.surfaceInputFocus})` : "transparent" }, children: [candidate.avatar ? _jsx("img", { src: candidate.avatar, alt: "", width: 28, height: 28, style: { borderRadius: "50%", objectFit: "cover" } }) : _jsx("span", { "aria-hidden": true, style: { width: 28, flexShrink: 0, textAlign: "center", color: tokens.color.brandPrimary }, children: "@" }), _jsxs("span", { style: { minWidth: 0, overflowWrap: "anywhere" }, children: [_jsx("span", { style: { display: "block", fontSize: tokens.typography.inputText.size }, children: candidate.name }), _jsx("small", { style: { color: tokens.color.textSecondary }, children: candidate.description ?? candidate.id })] })] }, candidate.id)) : _jsx("div", { role: "status", style: { padding: 12, color: tokens.color.textSecondary }, children: emptyText }) });
+}

package/lib/hooks/useMentions.d.ts

@@ -0,0 +1,38 @@
+import type { ChangeEvent, KeyboardEvent, SyntheticEvent } from "react";
+import type { ChatMention, MentionCandidate, MentionConfig } from "../mentions/model";
+/** Attach inputProps to a textarea, render MentionMenu with menuProps, and pass
+ * getMentions() with the untrimmed value when sending. No business lookup is performed. */
+export declare function useMentions({ value, onChange, config, disabled }: {
+    value: string;
+    onChange: (value: string) => void;
+    config?: MentionConfig;
+    disabled?: boolean;
+}): {
+    getMentions: () => ChatMention[];
+    inputProps: {
+        onChange(event: ChangeEvent<HTMLTextAreaElement>): void;
+        onSelect: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
+        onFocus(event: SyntheticEvent<HTMLTextAreaElement>): void;
+        onBlur(event: React.FocusEvent<HTMLTextAreaElement>): void;
+        onCompositionStart(): void;
+        onCompositionEnd(event: SyntheticEvent<HTMLTextAreaElement>): void;
+        onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+        role?: "combobox" | undefined;
+        "aria-autocomplete"?: "list" | undefined;
+        "aria-haspopup"?: "listbox" | undefined;
+        "aria-expanded"?: boolean | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+    };
+    menuProps: {
+        id: string;
+        open: boolean;
+        candidates: MentionCandidate[];
+        activeIndex: number;
+        onSelect: (candidate: MentionCandidate) => void;
+        onActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+        menuRef: import("react").RefObject<HTMLDivElement | null>;
+        label: string;
+        emptyText: string;
+    };
+};

package/lib/hooks/useMentions.js

@@ -0,0 +1,83 @@
+import { useId, useRef, useState } from "react";
+import { filterMentionCandidates, findMentionQuery, rebaseMentions } from "../mentions/model";
+/** Attach inputProps to a textarea, render MentionMenu with menuProps, and pass
+ * getMentions() with the untrimmed value when sending. No business lookup is performed. */
+export function useMentions({ value, onChange, config, disabled = false }) {
+    const id = useId();
+    const inputRef = useRef(null);
+    const menuRef = useRef(null);
+    const document = useRef({ text: value, mentions: [] });
+    const [caret, setCaret] = useState(0);
+    const [focused, setFocused] = useState(false);
+    const [composing, setComposing] = useState(false);
+    const [dismissed, setDismissed] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const mentions = rebaseMentions(document.current.text, value, document.current.mentions);
+    document.current = { text: value, mentions };
+    const query = config && focused && !composing && !disabled && !dismissed ? findMentionQuery(value, caret) : null;
+    const candidates = query ? filterMentionCandidates(config.candidates, query.query) : [];
+    const index = Math.min(activeIndex, Math.max(0, candidates.length - 1));
+    function select(candidate) {
+        if (!query)
+            return;
+        const insertion = `@${candidate.name}`;
+        const next = value.slice(0, query.start) + insertion + " " + value.slice(query.end);
+        document.current = {
+            text: next,
+            mentions: [...rebaseMentions(value, next, mentions), { id: candidate.id, name: candidate.name, start: query.start, end: query.start + insertion.length }].sort((a, b) => a.start - b.start),
+        };
+        setDismissed(true);
+        onChange(next);
+        requestAnimationFrame(() => {
+            const position = query.start + insertion.length + 1;
+            inputRef.current?.focus();
+            inputRef.current?.setSelectionRange(position, position);
+            setCaret(position);
+        });
+    }
+    function updateSelection(event) {
+        inputRef.current = event.currentTarget;
+        setCaret(event.currentTarget.selectionStart);
+        if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd)
+            setDismissed(true);
+    }
+    function onKeyDown(event) {
+        if (!query || event.nativeEvent.isComposing || event.keyCode === 229)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setDismissed(true);
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex(candidates.length ? (index + (event.key === "ArrowDown" ? 1 : candidates.length - 1)) % candidates.length : 0);
+        }
+        if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
+            event.preventDefault();
+            if (candidates[index])
+                select(candidates[index]);
+        }
+    }
+    return {
+        getMentions: () => config ? document.current.mentions.filter(mention => config.candidates.some(candidate => candidate.id === mention.id)) : [],
+        inputProps: {
+            ...(config ? { role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": Boolean(query), "aria-controls": query ? id : undefined, "aria-activedescendant": query && candidates[index] ? `${id}-${index}` : undefined } : {}),
+            onChange(event) {
+                updateSelection(event);
+                setDismissed(false);
+                setActiveIndex(0);
+                onChange(event.currentTarget.value);
+            },
+            onSelect: updateSelection,
+            onFocus(event) { updateSelection(event); setFocused(true); },
+            onBlur(event) {
+                if (!menuRef.current?.contains(event.relatedTarget))
+                    setFocused(false);
+            },
+            onCompositionStart() { setComposing(true); },
+            onCompositionEnd(event) { setComposing(false); setDismissed(false); updateSelection(event); },
+            onKeyDown,
+        },
+        menuProps: { id, open: Boolean(query), candidates, activeIndex: index, onSelect: select, onActiveIndex: setActiveIndex, menuRef, label: config?.label ?? "选择要提及的成员", emptyText: config?.emptyText ?? "没有匹配的成员" },
+    };
+}

package/lib/index.d.ts

@@ -28,3 +28,6 @@ export * from "./types/attachment";
 export * from "./types/chatInput";
 export * from "./types/voice";
 export * from "./voice/Recorder";
+export * from "./mentions/model";
+export * from "./hooks/useMentions";
+export * from "./components/MentionMenu";

package/lib/index.js

@@ -28,3 +28,6 @@ export * from "./types/attachment";
 export * from "./types/chatInput";
 export * from "./types/voice";
 export * from "./voice/Recorder";
+export * from "./mentions/model";
+export * from "./hooks/useMentions";
+export * from "./components/MentionMenu";