feat(interface) : Add userMessage config option

[thewoowon]

Hi Fredrik Oseberg. Your chatbot is awesome. However, I would like to be able to change the color of the user's message box as well. So I added options to the interface and injected inline styles. Can you give me some feedback if it's ok?

[tirsoh]

@FredrikOseberg I have reviewed this and it looked ok to me other than the small typo that I have asked them to correct. But since I am very new to this component I would like you to review this feature before I merge it in and cut a release of it.

[FredrikOseberg]

Thanks Troy, I will have a look.

fre. 20. jan. 2023 kl. 15:48 skrev Troy Steffen @.***>:

@FredrikOseberg https://github.com/FredrikOseberg I have reviewed this and it looked ok to me other than the small typo that I have asked them to correct. But since I am very new to this component I would like you to review this feature before I merge it in and cut a release of it.

— Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/pull/127#issuecomment-1398494262, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WIPXAV6GXY4V4PZSAWD3WTKQUVANCNFSM6AAAAAATYXLCUU . You are receiving this because you were mentioned.Message ID: @.***>

[FredrikOseberg]

I'm not sure drilling these props down to the default component is the way to go. If you need customization you can always create your own userChatMessage component that is styled the way you want it to:

  initialMessages: [createChatBotMessage(`Hi! I'm ${botName}`)],
 customComponents: {
     // Replaces the default header
    header: () => <div style={{ backgroundColor: 'red', padding: "5px", borderRadius: "3px" }}>This is the header</div>
    // Replaces the default bot avatar
    botAvatar: (props) => <MyAvatar {...props} />,
    // Replaces the default bot chat message container
    botChatMessage: (props) => <MyCustomChatMessage {...props} />,
    // Replaces the default user icon
    userAvatar: (props) => <MyCustomAvatar {...props} />,
    // Replaces the default user chat message
    userChatMessage: (props) => <MyCustomUserChatMessage {...props} />
  },
};```

[thewoowon]

hello. Fredrik Thanks for reviewing my commit. But it's not like I didn't consider Fredrik's method... However, even if it is not custom, if you can select the text or background color I thought it was good.

I customized it like this using customComponents. But UserMessageInput(write your message here) doesn't seem to have any customizations. Maybe I can inject a custom component here too Can I commit after editing?

[thewoowon]

no response