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

MessageModal

The MessageModal component is a modal window that can display either a message in Markdown format or a message input field for editing the message.

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

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

Editing

APIs

NameDescriptionTypeDefault
editingWhether the message is being edited or notbooleanfalse
extra--ReactNode--
height--any--
onChangeCallback fired when message content is changed(text:string)=>void--
onEditingChangeCallback fired when editing state is changed(editing:boolean)=>void--
onOpenChangeCallback fired when open state is changed(open:boolean)=>void--
placeholderWhether the modal is open or notstringfalse
text--{cancel?:string;confirm?:string;edit?:string;title?:string}--
valueThe value of the message contentstring(required)
footer--any--
open--any--
Only change when click confirm