logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • Sources来源引用
    • Think思考过程
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
    • FileCard文件卡片
  • 其他
    • XProvider全局化配置

Sender
输入框

用于聊天的输入框组件。
使用import { Sender } from "@ant-design/x";
源码components/sender
文档
编辑此页...
更新日志
loading

何时使用

  • 需要构建一个对话场景下的输入框

代码演示

API

通用属性参考：通用属性

SenderProps

属性说明类型默认值版本
allowSpeech是否允许语音输入boolean | SpeechConfigfalse-
classNames样式类名见下--
components自定义组件Record<'input', ComponentType>--
defaultValue输入框默认值string--
disabled是否禁用booleanfalse-
loading是否加载中booleanfalse-
suffix后缀内容，默认展示操作按钮，当不需要默认操作按钮时，可以设为 suffix={false}React.ReactNode | false |(oriNode: React.ReactNode,info: { components: ActionsComponents;}) => React.ReactNode | false;oriNode-
header头部面板React.ReactNode | false |(oriNode: React.ReactNode,info: { components: ActionsComponents;}) => React.ReactNode | false;false-
prefix前缀内容React.ReactNode | false |(oriNode: React.ReactNode,info: { components: ActionsComponents;}) => React.ReactNode | false;false-
footer底部内容React.ReactNode | false |(oriNode: React.ReactNode,info: { components: ActionsComponents;}) => React.ReactNode | false;false-
readOnly是否让输入框只读booleanfalse-
rootClassName根元素样式类string--
styles语义化定义样式见下--
submitType提交模式SubmitTypeenter | shiftEnter-
value输入框值string--
onSubmit点击发送按钮的回调(message: string, slotConfig?: SlotConfigType[]) => void--
onChange输入框值改变的回调(value: string, event?: React.FormEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLTextAreaElement>, slotConfig?: SlotConfigType[]) => void--
onCancel点击取消按钮的回调() => void--
onPasteFile黏贴文件的回调(files: FileList) => void--
autoSize自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }boolean | { minRows?: number; maxRows?: number }{ maxRows: 8 }-
slotConfig词槽配置，配置后输入框将变为词槽模式，支持结构化输入，此模式value 和 defaultValue 配置将无效。SlotConfigType[]--
typescript
type SpeechConfig = {
  // 当设置 `recording` 时，内置的语音输入功能将会被禁用。
  // 交由开发者实现三方语音输入的功能。
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
};
typescript
type ActionsComponents = {
  SendButton: React.ComponentType<ButtonProps>;
  ClearButton: React.ComponentType<ButtonProps>;
  LoadingButton: React.ComponentType<ButtonProps>;
  SpeechButton: React.ComponentType<ButtonProps>;
};

Sender Ref

属性说明类型默认值版本
nativeElement外层容器HTMLDivElement--
focus获取焦点，当 cursor = 'slot' 时焦点会在第一个插槽类型为 input 的输入框内，若不存在对应的 input 则效果会和 end 一致。(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' | 'slot' })--
blur取消焦点() => void--
insert插入文本或者插槽，使用插槽时需确保 slotConfig 已配置(value: string) => void | (slotConfig: SlotConfigType[], position?: insertPosition, replaceCharacters?: string) => void;--
clear清空内容() => void--
getValue获取当前内容和结构化配置() => { value: string; config: SlotConfigType[] }--

SlotConfigType

属性说明类型默认值版本
type节点类型，决定渲染组件类型，必填'text' | 'input' | 'select' | 'tag' | 'custom'--
key唯一标识，type 为 text 时可省略string--
formatResult格式化最终结果(value: any) => string--
text 节点属性
属性说明类型默认值版本
text文本内容string--
input 节点属性
属性说明类型默认值版本
props.placeholder占位符string--
props.defaultValue默认值string | number | readonly string[]--
select 节点属性
属性说明类型默认值版本
props.options选项数组，必填string[]--
props.placeholder占位符string--
props.defaultValue默认值string--
tag 节点属性
属性说明类型默认值版本
props.label标签内容，必填ReactNode--
props.value标签值string--
custom 节点属性
属性说明类型默认值版本
props.defaultValue默认值any--
customRender自定义渲染函数(value: any, onChange: (value: any) => void, props: { disabled？:boolean,readOnly？: boolean},item: SlotConfigType) => React.ReactNode--

Sender.Header

属性说明类型默认值版本
children面板内容ReactNode--
classNames样式类名见下--
closable是否可关闭booleantrue-
forceRender强制渲染，在初始化便需要 ref 内部元素时使用booleanfalse-
open是否展开boolean--
styles语义化定义样式见下--
title标题ReactNode--
onOpenChange展开状态改变的回调(open: boolean) => void--

Sender.Switch

属性说明类型默认值版本
children通用内容ReactNode--
checkedChildren选中时的内容ReactNode-
unCheckedChildren非选中时的内容ReactNode-
icon设置图标组件ReactNode-
disabled是否禁用booleanfalse-
loading加载中的开关boolean--
value开关的值booleanfalse-
onChange变化时的回调函数function(checked: boolean)--
rootClassName根元素样式类string--

⚠️ 词槽模式注意事项

  • 词槽模式下，value 和 defaultValue 属性无效，请使用 ref 及回调事件获取输入框的值和词槽配置。
  • 词槽模式下，onChange/onSubmit 回调的第三个参数 config，仅用于获取当前结构化内容。

示例：

jsx
// ❌ 错误用法, slotConfig 为不受控用法
const [config, setConfig] = useState([]);
<Sender
  slotConfig={config}
  onChange={(value, e, config) => {
    setConfig(config);
  }}
/>


// ✅ 正确用法
<Sender
  key={key}
  slotConfig={config}
  onChange={(value, _e, config) => {
    // 仅用于获取结构化内容
    setKey('new_key')
  }}
/>

Semantic DOM

主题变量（Design Token）

组件 Token如何定制？
Token 名称描述类型默认值
colorBgSlot词槽背景颜色stringrgba(22,119,255,0.06)
colorBorderInput输入框边框颜色stringrgba(0,0,0,0.1)
colorBorderSlot词槽边框颜色stringrgba(22,119,255,0.06)
colorBorderSlotHover词槽边框悬浮态颜色stringrgba(22,119,255,0.1)
colorTextSlot词槽文本颜色string#1677ff
colorTextSlotPlaceholder词槽文本占位符颜色stringrgba(22,119,255,0.25)
switchCheckedBg开关选中背景颜色stringrgba(22,119,255,0.08)
switchCheckedHoverBg开关选中悬浮态背景颜色stringrgba(22,119,255,0.1)
switchUncheckedHoverBg开关未选中悬浮态背景颜色stringrgba(0,0,0,0.04)
全局 Token如何定制？
Attachments
智能体输入

智能体输入框。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
基本用法

基础用法，受控进行状态管理。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Default:
Custom checked/unchecked content:
Disabled:
Loading:
DefaultValue:
Controlled mode:
功能开关

功能开关，用于Sender功能开启/关闭。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
词槽模式

在输入中提供词槽及下拉选择，提升用户输入效率及准确性。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
实例方法

使用 ref 选项控制聚焦、文本插入等。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
提交方式

通过 submitType 控制换行与提交模式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
语音输入

语音输入，需要用户同意麦克风权限。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义语音输入

自定义语音逻辑，从而实现调用三方库的语音识别功能。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
`Shift + Enter` to submit
自定义后缀

通过 actions 属性，可以自定义发送按钮的行为。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
展开面板

使用 header 自定义文件上传示例。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Attachments
快捷指令

带有快捷指令的智能体输入框，输入@ 可以唤起快捷指令。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
"Tell more about Ant Design X"
引用

使用 header 做引用效果。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Deep Thinking
自定义底部内容

使用 footer 自定义底部内容。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
调整样式

通过定制后缀，调整actions。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Attachments
Upload files
Click or drag files to this area to upload
黏贴文件

使用 onPasteFile 获取黏贴的文件，配合 Attachments 进行文件上传。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Deep thinking can understand the intent behind.
  • root
    根节点
  • prefix
    前缀
  • input
    输入框
  • suffix
    后缀
  • footer
    底部
  • switch
    开关
  • content
    内容
Header
Content
  • header
    头部
  • content
    头部-内容