Custom bubble style for sender and myself

[bhirmbani]

Hi, thank you for the cool simple library. Just wondering, can you point me to the implementation of custom bubble style for the sender. Example, if the background color of sender is other than gray and also a custom background color bubble for myself.

[boweihan]

https://github.com/brandonmowat/react-chat-ui/blob/master/src/ChatBubble/index.tsx

looks like this isn't supported at the moment

[Alec-Alameddine]

You can edit index.js and styles.js

For example styles.js:

pSender: {
        color: 'black',
        fontSize: 16,
        fontWeight: '300',
        margin: 0,
    },
pRecipient: {
    color: 'white',
    fontSize: 16,
    fontWeight: '300',
    margin: 0,
}

index.js:

React.createElement("p", { style: __assign({}, this.props.message.id === 0 ? styles_1.default.pSender : styles_1.default.pRecipient, text) }, this.props.message.message))));

[techinsider99]

Editing locally will not help if your project is built using pipelines on a devops platform, since node modules are installed at build time!