Display Chatbot response message in HTML format?

[jamesmonek]

Thanks for writing an excellent chatbot framework. Is it possible to display the chatbot response in HTML? I successfully followed the getting started videos, which were great, but I'm struggling to display the results from my query that I send back to the chatbot message in HTML. It's just looks like basic text, even the /n new line breaks don't even render.

[xamat]

You can write fully formatted HTML code in your response if you use customMessages. As an example, this is my customMessage where I pass an HTML message and render it:

const CustomMessage = ( props ) => {
   const lastMessageIndex = props.state.messages.length - 1; 
    if(lastMessageIndex<0){
        return null;
    }
    const customContent = props.state.messages[lastMessageIndex].message;
    return (
      <div className="react-chatbot-kit-chat-bot-message" 
        style={{ padding: '10px', border: '1px solid #ccc', backgroundColor: '#376B7E' }}
        dangerouslySetInnerHTML={{ __html: customContent }}>
      </div>
    );
  };

[OliverThomas2000]

Just to add on. You don't even need to use custom messages like this. createChatBotMessage will also allow you to pass HTML

[xamat]

@OliverThomas2000 How can you do that? @jamesmonek , I tried passing HTML to createChatBotMessage and it got interpreted as literal strings.

[OliverThomas2000]

I have this:

const botMessage = createChatBotMessage(
      <div dangerouslySetInnerHTML={{ __html: response.summary }} />,
      { withAvatar: false }
    );
addMessageToState(botMessage);

[jamesmonek]

I have this:

const botMessage = createChatBotMessage(
      <div dangerouslySetInnerHTML={{ __html: response.summary }} />,
      { withAvatar: false }
    );
addMessageToState(botMessage);

Thanks OliverThomas2000. I get a "SyntaxError: Unexpected token '<'" error.

const message = this.createChatBotMessage(<div dangerouslySetInnerHTML={{ __html: finalresult }} />); this.setChatbotMessage(message);

[xamat]

@jamesmonek This works for me, at least as part of initialMessages.

[jamesmonek]

@jamesmonek This works for me, at least as part of initialMessages.

OliverThomas2000 and Xamat. Thanks, it was my fault, the file was named with .js and when I changed it to .jsx, it worked perfectly. Thanks OliverThomas2000!