跳到主要内容
前端术语库

UI 组件 · 表单输入

对话输入框

Chat Input

也叫：聊天输入框、消息输入框、发送框、Composer、Prompt Input、Message Input

聊天和 AI 对话界面底部的输入区：一个随内容长高的文本框，加上附件、发送（生成时变成停止）等按钮，回车发送、Shift+回车换行。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在 AI 对话页底部做一个对话输入框：容器最大宽度 760px 居中，白底、1px 浅灰边框、圆角 24px、轻微阴影。里面是自动长高的文本框，默认 1 行、最多 6 行，之后内部滚动，占位文字「给 AI 助手发消息」；左下角是「附件」和「联网搜索」两个 32px 图标按钮，右下角是 36px 圆形发送按钮，没输入内容时置灰，AI 回复中变成方形「停止」按钮。已上传的文件以 48px 高的小卡片显示在文本框上方，右上角带 ✕。回车发送、Shift+回车换行，中文输入法组字时按回车不发送。输入框下方居中一行 12px 灰字「AI 可能会出错，请核对重要信息」。手机上随软键盘上移。

发给

01判断

你的内容是这样吗？

对照两列，确认对话输入框是不是你要找的。

符合这些情况，用对话输入框

  • AI 助手、智能客服、Copilot 侧边栏里给 AI 发消息
  • 即时聊天、私信、群聊的消息输入区
  • 发一句话时还要带上图片、文件，或者先选好模型再发送

是这些情况，换成别的

  • 文章、商品下面发表评论，用评论区自带的输入框，写完点「发布」即可

    改用输入框

  • 需要填好几个字段（标题、分类、正文）的内容

    改用表单

  • 写需要排版的长文章

    改用富文本编辑器

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    用中文输入法选字时按了回车，半句话就被发了出去

  2. 02

    输入框固定一行高，长问题只能在一行里左右滚动着看

  3. 03

    AI 回复时发送按钮没有任何变化，既不能停止，也看不出正在生成

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一个圆角容器组成，里面是自动长高的多行文本框、附件预览卡片、左侧的工具按钮（附件、模型、联网）和右侧的发送 / 停止按钮，下方常有一行提示小字。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1屏幕最下方一个大圆角的输入框，占位文字像「给 AI 发消息」「Ask anything」
  2. 2框的右下角是一个圆形箭头发送按钮，左下角有回形针等小图标
  3. 3输入框下方常有一行居中的灰色提示小字

04解释

详细解释

对话输入框固定在对话区最下方，是用户说话的地方。核心是一个 多行文本框：一开始只有一行高，字多了自动长高，到五六行后改成内部滚动。左下角一排小按钮放「上传附件」「选择模型」「联网搜索」这类工具，右边是圆形的发送按钮：没输入内容时置灰，AI 正在回复时变成方形的「停止」。上传的图片、文件以小卡片的形式排在文本框上方，可以单独删掉。输入框下面常有一行灰色小字，例如「AI 可能会出错，请核对重要信息」。

它和普通 多行文本框 的区别在于它是一整块组合：文本框、工具按钮、附件预览和发送按钮装在一个圆角容器里，还带着回车发送、生成中可以停止这些对话专用的行为。它也不同于 评论 的输入框：评论框在内容下方，写完点「发布」就结束；对话输入框一直停在屏幕底部，发完立刻清空，等着下一句。

回车发送、Shift+回车换行是约定俗成的，但用中文输入法选字时按的回车不能触发发送（要判断输入法是否还在组字）。发送后清空内容、焦点留在框里；发送失败时把原文放回去，不要让用户重打。手机上输入框要跟着软键盘上移，别被键盘挡住；输入框要有 aria-label，只有图标的发送按钮也要有名称。

开发者信息
术语 ID
component-chat-input
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-sender
  • .cs-message-input
  • .rce-input
  • .str-chat__message-input
  • :is(div, form):has(> textarea):has(> button:is([aria-label*="发送"], [aria-label*="send" i]))
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • chat-input
  • chat-composer
  • composer
  • message-input
  • message-composer
  • msg-input
  • prompt-input
  • prompt-box
  • prompt-bar
  • chat-form
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • ChatInput
  • ChatComposer
  • Composer
  • MessageInput
  • MessageComposer
  • PromptInput
  • ChatSender
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30