# Component Markdown Input Field

> Develop MarkdownInputField and attachments, voice, send actions in @ant-design/agentic-ui. Use when building chat input, file upload, voice input, send button, or suggestion bar. Triggers on MarkdownInputField, input field, attachment, voice input, send button.

- Skill: `antdigital-ai/component-markdown-input-field` (Agent Skill)
- Install (CLI): `npx skillmds@latest add antdigital-ai/component-markdown-input-field`
- Raw SKILL.md: https://api.skillmd.com/api/skills/antdigital-ai/component-markdown-input-field/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: antdigital-ai (https://skillmd.com/u/antdigital-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/antdigital-ai/component-markdown-input-field

---


# MarkdownInputField 组件开发

多模态输入框：Markdown 输入、附件、语音、发送按钮与建议条等。

## 源码位置

- 主组件：`src/MarkdownInputField/MarkdownInputField.tsx`
- 附件：`src/MarkdownInputField/AttachmentButton/`、`AttachmentFileList/`
- 语音：`src/MarkdownInputField/VoiceInput/`
- 发送与建议：`SendButton`、`Suggestion`、`QuickActions`、`SkillModeBar` 等
- 类型与工具：见各子目录 `types`、`utils`

## 主要能力

- Markdown 输入与编辑器联动
- 附件上传、列表展示、类型限制
- 语音输入与状态
- 发送按钮、快捷操作、技能模式条

## 开发规范

- 使用 token 与 `createStyles`，支持 `classNames`/`styles`。
- 事件使用 `on` 前缀（如 `onSend`、`onFileSelect`）。
- 与 Bubble、ChatLayout 等配合时保持交互一致。

修改或扩展输入框、附件、语音、发送逻辑时，参考 `src/MarkdownInputField/` 与 `AGENTS.md`。