组合输入框

版本：^2.7.1

AI 无处不在，对话式界面已经成了新常态。我们觉得，是时候让 Flux 拥有一个专为消息输入而生的组件了。

这就是 Composer：一个可配置的消息输入组件，支持操作按钮和富文本功能。下面一起来看看。

<flux:composer wire:model="prompt" placeholder="How can I help you today?">
    <x-slot name="actionsLeading">
        <flux:button size="sm" variant="subtle" icon="paper-clip" />
    </x-slot>

    <x-slot name="actionsTrailing">
        <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />
    </x-slot>
</flux:composer>

两种布局

默认情况下，操作按钮位于输入框下方的单独一行中。添加 inline 属性即可将它们放到输入框旁边，形成更紧凑的布局——非常适合单行输入场景。

<flux:composer inline rows="1" ...>
    ...
</flux:composer>

富文本

需要格式化能力？只需在 input 插槽中传入一个编辑器组件，就可以将默认的 textarea 换成完整的富文本编辑器。

<flux:composer wire:model="prompt" rows="3" ...>
    <x-slot name="input">
        <flux:editor variant="borderless" toolbar="bold italic bullet ordered | link" />
    </x-slot>
    ...
</flux:composer>

提交行为

默认情况下，按下 Cmd/Ctrl + Enter 会提交表单。若想要类似聊天的体验，让 Enter 直接发送消息，只需添加 submit="enter" 即可。

<flux:composer submit="enter" ...>
    ...
</flux:composer>

高度控制

通过 rows 设置初始高度，并用 max-rows 限制最大高度。输入内容增多时，输入框会自动变高，到达最大高度后则变为可滚动。

<flux:composer rows="4" max-rows="8" ...>
    ...
</flux:composer>

可访问性

当然，我们也花了大量精力来确保该组件在键盘导航、焦点行为以及正确的 aria-label 等方面都符合预期，这样依赖屏幕阅读器的用户也能同样顺畅地使用它。

查看 Composer 文档以了解更多示例和完整的 API 参考。