I'm just started exploring botframework webchat with React. I have tried to come until below UI.
In docs, its mentioned like we can control each parts of the UI using React. But I couldn't see samples that could modify webchat message styles like (user/bot message height, customize message input field). In the ReactWebChat component, there is a className prop.
<ReactWebChat
className={`${className || ''} web-chat`}
Is it recommended to use this classname in-conjunction with message class selector (.web-chat .webchat__bubble__content p) to customize UI ?
Thanks
This document should get you started. Most basic styling is available via configuration-settings.
The border of a textmessage for instance could be implemented via styleoptions:
<!DOCTYPE html>
<head>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<body>
<div style="height: 60%; width: 40%; margin-top:5%; margin-left:10%" id="webchat" role="main"></div>
<script>
// Set the CSS rules.
const styleSet = window.WebChat.createStyleSet({
...
bubbleBorderColor: '#E6E6E6',
bubbleBorderRadius: 2,
bubbleBorderStyle: 'solid',
bubbleBorderWidth: 1,
...
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: '<Your Direct Line token>'}),
styleSet
}, document.getElementById('webchat'));
</script>
</body>