How can we use react markdown in the displayed messages

[ManishitSingh]

No description provided.

[admin-suketa]

Use Custome Messages as mentioned in this link: https://fredrikoseberg.github.io/react-chatbot-kit-docs/docs/advanced/custom-messages

[zmoshansky]

From a next project, using tailwindCSS

import Markdown from 'react-markdown'

export default function BotChatMessage({ message }: { message: string }) {
    return <div className="grid flex-col gap-4 rounded-md">
        <Markdown>{message}</Markdown>
        <hr />
    </div>
}

Config

customComponents: {
            botChatMessage: BotChatMessage,
}