react-chat-elements icon indicating copy to clipboard operation
react-chat-elements copied to clipboard

Is there any way to render a custom component inside the chat message?

Open Frajdi opened this issue 1 year ago • 1 comments

I would like something like this

<MessageList
            className="message-list"
            dataSource={messages}
            renderMessage={(message) => {
                if(isCode(messagge.text)){
                     return <CodeSnippet code={message.text}/>
                }else{
                    return <p>{message.text}</p>
                }}
/>

Frajdi avatar Feb 16 '24 12:02 Frajdi

Just found out you can use the text property to support under courtesy of @last-Programmer so your code may look like this:

<MessageList
  className='message-list'
  dataSource={messages.map(message => (
    isCode(message.text) ? (
      {...message, text: <CodeSnippet code={message.text}/>}
    ) : (
      {...message, text: <p>{message.text}</p>}
    )
/>

JosephReece avatar Jul 16 '24 23:07 JosephReece