ChatSender

强大的聊天消息发送组件，支持富文本、占位符输入框、及各种工具栏插槽。

ChatSender 是一个功能完备的对话输入组件。它支持自适应高度输入，并提供了丰富的插槽用于添加附件上传、模型选择等按钮。

核心特性

高度自适应：输入框高度随内容自动撑开。
插槽系统：提供 before、leftTools、rightTools 等多个位置的 ReactNode 插槽。
状态联动：内置“发送”与“停止生成”状态切换逻辑。
键盘支持：支持 Enter 发送，Shift + Enter 换行。

基本用法

import { ChatSender } from "@pt/react-common/components";

const [value, setValue] = useState("");
const [isGenerating, setIsGenerating] = useState(false);

const handleSubmit = (content) => {
setIsGenerating(true);
// 模拟 AI 回复...
};

<ChatSender
value={value}
onChange={setValue}
isGenerating={isGenerating}
onSubmit={handleSubmit}
onStop={() => setIsGenerating(false)}
placeholder="请输入消息..."
/>

状态展示：生成中

正在思考或生成回复时的状态

<ChatSender isGenerating={true} />

自定义工具栏

利用 leftTools 插入自定义按钮

<ChatSender 
leftTools={
  <button className="text-xs px-2 py-1 bg-fd-muted rounded border">
    切换模型
  </button>
} 
/>

属性说明 (Props)

属性	类型	默认值	说明
`value`	`string`	-	输入值（受控）
`onChange`	`(val: string) => void`	-	值变化回调
`isGenerating`	`boolean`	`false`	是否显示“停止生成”按钮
`placeholder`	`string`	-	输入框占位符
`onSubmit`	`(content: string) => void`	-	提交消息触发（Enter 或点击发送）
`onStop`	`() => void`	-	点击停止按钮的回调
`leftTools`	`ReactNode`	-	底部区域左侧工具栏插槽
`rightTools`	`ReactNode`	-	发送按钮左侧工具栏插槽
`className`	`string`	-	自定义类名

互动演练场

试试直接编辑下方代码，预览区会实时更新：

加载编辑器中…

ChatSender

核心特性

基本用法

状态展示：生成中

自定义工具栏

属性说明 (Props)

互动演练场

On this page