LobeChatLobeHub
UI
Components
Chat
Mobile
Awesome
Brand
Mdx
Color
Changelog
Ctrl K
Data Display
ChatItem
ChatList
TokenTag
Data Entry
ChatInputArea
EditableMessage
EditableMessageList
MessageInput
Feedback
MessageModal
Layout
ChatHeader
Navigation
BackBottom

MessageInput

import { MessageInput } from '@lobehub/ui/chat';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
Source
Edit
Previous
EditableMessageList
Next
MessageModal

Resources

Lobe UI-AIGC Components
Lobe Icon-AI / LLM Icon Collection
Lobe Charts-Modern Charts
Lobe TTS-TTS / STT Library

Community

Report Bug
Request Feature

Help

GitHub
Changelog

More Products

🤯 Lobe Chat-AI / LLM Chat Framework
🧸 Lobe Vidol-Virtual Idols for EveryOne
🅰️ Lobe Theme-Stable Diffusion Extension
🌐 Lobe i18n-AI i18next CLI
Copyright © 2022-2025
Made with 🤯 by LobeHub
LobeHub

Default

APIs

NameDescriptionTypeDefault
classNameAdditional className to apply to the component.string--
classNames--any--
defaultValueThe default value of the input box.string--
editButtonSize--"small"|"middle"|"large"--
height--number|auto|string--
onCancelCallback function triggered when user clicks on the cancel button.()=>void--
onConfirmCallback function triggered when user clicks on the confirm button.(text:string)=>void--
placeholder--string--
renderButtonsCustom rendering of the bottom buttons.(text:string)=>ButtonProps[]--
text--{cancel?:string;confirm?:string}--
textareaClassname--string--
textareaStyle--{}--
typeThe type of the input box.any--
Only change when click confirm