@micka_design: 新组件发布：聊天式消息编辑器，带自动调整大小的文本区域，灵活的左/右操作槽。简洁…

X AI KOLs Following 工具
chat-component textarea open-source ui-component react developer-tool

摘要

Fluid Functionalism 发布了一个开源的聊天式消息编辑器组件，具有自动调整大小的文本区域和灵活的左/右操作槽。

新组件发布：聊天式消息编辑器，带自动调整大小的文本区域，灵活的左/右操作槽。简洁、简单、高效。开源地址：https://fluidfunctionalism.com/docs/input-message…
查看原文
查看缓存全文

缓存时间: 2026/06/06 01:23

新组件发布：聊天风格消息编辑器，具备自动调整大小的文本区域、灵活的左右操作插槽。简洁、高效。开源地址：https://fluidfunctionalism.com/docs/input-message…

Fluid Functionalism

来源：https://www.fluidfunctionalism.com/docs/input-message

属性类型默认值描述
valuestring—受控的文本区域值。
onValueChange(value: string) => void—每次文本区域内容变化时，以新值调用该函数。
onSend(value: string, files: File[]) => void—按下 Enter（不带 Shift）或点击发送按钮时触发。接收修剪后的值和当前附加的文件。当值为空且未附加文件时跳过。
placeholderstring“Ask me anything…”文本区域为空时显示的占位符。当文件被拖拽到组件上方（且附件功能启用）时，占位符切换为“将文件拖拽到此处以添加到聊天”。
leftSlotReactNode | (ctx) => ReactNode—渲染在左下角操作区域的内容。可以是渲染函数，接收 { openFilePicker, files } —— openFilePicker(acceptOverride?) 打开原生文件选择器（可选限定接收类型子集，例如 "image/*"）。
rightSlotReactNode | (ctx) => ReactNode—渲染在右下角操作区域（内置发送按钮之前）的内容。渲染函数形式与 leftSlot 相同。
disabledbooleanfalse禁用文本区域、发送按钮以及拖放功能。
minRowsnumber1文本区域增长前的最小可见行数。
maxRowsnumber8文本区域开始滚动前的最大可见行数。
clickToFocusbooleantrue为 true 时，点击周围容器（按钮/链接/输入框之外）的任意位置可聚焦文本区域。
sendLabelstring“Send”发送按钮的可访问标签。
filesFile[]—受控的已附加文件列表。与 onFilesChange 配合可启用拖放和文件选择器插槽帮助程序。省略时，附件行为被禁用。
onFilesChange(files: File[]) => void—文件被添加（通过拖放或选择器）或通过预览图标的 × 按钮移除时调用。重复拖放同一文件（相同名称+大小+最后修改时间）会被静默去重。
acceptstring“image/png,image/jpeg,application/pdf”以逗号分隔的接受的 MIME 类型字符串。用于文件选择器和拖放过滤。
maxFilesnumber—最大可附加文件数。超出此限制的多余文件将被丢弃。
filePreviewSizenumber80每个预览图标的边长（像素）。图像使用 object-cover；PDF 通过 pdfjs 渲染首页；其他类型回退为居中图标。
textareaPropsTextareaHTMLAttributes—传递给底层文本区域的额外属性（value、onChange、onKeyDown、disabled 和 placeholder 由组件控制）。

相似文章