score:0

Accepted answer

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>

score:0

botframework-webchat has a list of styleoptions that you can override located here:

https://github.com/microsoft/botframework-webchat/blob/main/packages/api/src/defaultstyleoptions.ts

it's possible to use webchat's activitymiddleware to render your own custom message bubbles component:

const activitymiddleware = () => (next: any) => (...args) => {
    const [card] = args;
    if (card.activity) {
        if (condition) {
            return (
                <div key={card.activity.id} classname='custom-class'>
                    {next(card)(children)}
                </div>
            )
        }
    }
}

... 

return (
    <reactwebchat
        activitymiddleware={activitymiddleware}
        directline={adapter}
        styleoptions={styleoptions}
    />
);

Related Query

More Query from same tag