Custom component error when rendering messages from history

[eugeniumegherea]

Version: 0.7.23
Consider following code:

  render() {
    return (
      <Fragment>
        {
          this.state.initialized && (
            <Widget
              ref={ el => this.addListeners(el) }
              {...this.props}
              customComponent={ev => this.renderCustomComponent(ev)}
            />
          )
        }
      </Fragment>
    );
  }

  private renderCustomComponent(msg: any) {
    const dangerousHtml = {
      __html: msg.custom.htmlContent
    };

    return (
      <div className="response">
        <div className="message-text">
          <div className="markdown" dangerouslySetInnerHTML={ dangerousHtml }></div>
        </div>
      </div>
    );
  }

Message payload looks like this:

{
   custom: {
        htmlContent: "<button>some button</button>"
   }
}

When I get this message live from rasa, custom component renders it properly. If I do a page refresh, it will try to render history and I get an error in console that msg.custom is undefined. Upon debugging source code found out that message props are not passed in correctly in custom component. This is the message I get, there is no key named custom at all, but it's there, it's just not properly passed as prop. (See _root prop and it's entries)

I think the way props are passed is just wrong because ...message.get('props') returns another immutable instance, not a proper json we need. I think it might be that when the message is live, it's not an immutable instance but a simple json and that's why it's working.

rasa-webchat/src/components/Widget/components/Conversation/components/Messages/index.js

Line 69 in 876bf07

return <ComponentToRender id={index} {...message.get('props')} isLast={isLast} />;

I would really appreciate some input on this
Thanks