flowchart TD App["ChatbotApp (root)
props: userId, apiEndpoint, theme
state: history, connection"]:::container App --> Header["ChatHeader
bot name, avatar, status"]:::presentational App --> MsgList["MessageList
props: messages, isTyping
state: scroll position"]:::container App --> Input["InputArea
state: input text, sending"]:::container MsgList --> Message["Message
text, sender, timestamp, type"]:::presentational MsgList --> Typing["TypingIndicator
animated dots"]:::presentational MsgList --> Scroll["ScrollToBottom button"]:::interaction Message --> UserMsg["UserMessage
right-aligned, blue bubble"]:::presentational Message --> BotMsg["BotMessage
left-aligned, gray bubble"]:::presentational BotMsg --> TextMsg["TextMessage
plain text"]:::presentational BotMsg --> RichMsg["RichMessage
cards, carousels, buttons"]:::presentational BotMsg --> MediaMsg["MediaMessage
images, video, files"]:::presentational Input --> TextInput["TextInput"]:::interaction Input --> SendBtn["SendButton"]:::interaction Input --> AttachBtn["AttachmentButton"]:::interaction Input --> QuickReplies["QuickReplies"]:::interaction Input -.->|onSendMessage callback| App App -.->|props: messages| MsgList classDef container fill:#1e3a8a,stroke:#0f172a,stroke-width:2px,color:#fff,font-size:13px classDef presentational fill:#60a5fa,stroke:#1d4ed8,stroke-width:2px,color:#0f172a,font-size:13px classDef interaction fill:#22c55e,stroke:#15803d,stroke-width:2px,color:#fff,font-size:13px linkStyle default stroke:#94a3b8,stroke-width:2px,font-size:12px linkStyle 15,16 stroke:#f97316,stroke-width:2.5px,font-size:12px