javascript - Customizing bot framework direct line API with css

Question

</footer>
<!-- Footer -->

<!-- SCRIPTS -->
<script src="https://unpkg.com/botframework-webchat/botchat.js"></script>
<script>
    (function () {
        var div = document.createElement("div");
        document.getElementsByTagName('body')[0].appendChild(div);
        div.outerHTML = "<div id='botDiv' style='width: 400px; height: 500px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
        BotChat.App({
            directLine: { secret: ' Secrete key here' },
            user: { id: 'user' },
            bot: { id: '' }
        }, document.getElementById("botDiv"));

        document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
        document.querySelector('body').addEventListener('click', function (e) {
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            if (e.target.matches('#chatbotheader')) {
                var botDiv = document.querySelector('#botDiv');
                botDiv.style.height = botDiv.style.height == '500px' ? '38px' : '500px';
            };
        });
    }());

</script>

I want the chat icon like this at the bottom right corner of the we page before the user clicks

and the chat pop up this way

I Built a bot with bot framework. I have added the bot to my website using the direct line API and its appears by the right corner of my website. I need to customize it using the botchat.css in downloaded to my app file for customizing the bot. I also need to add a round image icon to each message the bot and user send. please how do I achieve this using the botchat.css file?

In a nutshell, I would love to achieve something like this

Answer 1

It seems that you’d like to dynamically expand/collapse your chat bot, and show bot icon with each message. To achieve your requirements, please refer to following steps.

1)Build customized WebChat to show bot icon with each message by modifying History.tsx.

export class WrappedActivity extends React.Component<WrappedActivityProps, {}> {
    public messageDiv: HTMLDivElement;

    constructor(props: WrappedActivityProps) {
        super(props);
    }

    render () {
        let timeLine: JSX.Element;
        switch (this.props.activity.id) {
            case undefined:
                timeLine = <span>{ this.props.format.strings.messageSending }</span>;
                break;
            case null:
                timeLine = <span>{ this.props.format.strings.messageFailed }</span>;
                break;
            case "retry":
                timeLine =
                    <span>
                        { this.props.format.strings.messageFailed }
                        { ' ' }
                        <a href="." onClick={ this.props.onClickRetry }>{ this.props.format.strings.messageRetry }</a>
                    </span>;
                break;
            default:
                let sent: string;
                if (this.props.showTimestamp)
                    sent = this.props.format.strings.timeSent.replace('%1', (new Date(this.props.activity.timestamp)).toLocaleTimeString());
                timeLine = <span>{ this.props.activity.from.name || this.props.activity.from.id }{ sent }</span>;
                break;
        }

        const who = this.props.fromMe ? 'me' : 'bot';

        const wrapperClassName = classList(
            'wc-message-wrapper',
            (this.props.activity as Message).attachmentLayout || 'list',
            this.props.onClickActivity && 'clickable'
        );

        const contentClassName = classList(
            'wc-message-content',
            this.props.selected && 'selected'
        );

        if(who=="bot"){
            return (
                <div data-activity-id={ this.props.activity.id } className={ wrapperClassName } onClick={ this.props.onClickActivity }>

                    {/*Add <img/> element to show botIcon*/}
                    <img className='botIcon' src="https://i.stack.imgur.com/jyAmj.png"  width="39px" height="39px"/>
                    <div className={ 'wc-message wc-message-from-' + who } ref={ div => this.messageDiv = div }>
                        <div className={ contentClassName }>
                            <svg className="wc-message-callout">
                                <path className="point-left" d="m0,6 l6 6 v-12 z" />
                                <path className="point-right" d="m6,6 l-6 6 v-12 z" />
                            </svg>
                            { this.props.children }
                        </div>
                    </div>
                    <div className={ 'wc-message-from wc-message-from-' + who }>{ timeLine }</div>
                </div>
            );
        }else{
            return (
                <div data-activity-id={ this.props.activity.id } className={ wrapperClassName } onClick={ this.props.onClickActivity }>

                    {/*Add <img/> element to show userIcon*/}

                    <img className='userIcon' src="https://i.stack.imgur.com/kjSAI.jpg?s=48&g=1"  width="39px" height="39px"/>
                    <div className={ 'wc-message wc-message-from-' + who } ref={ div => this.messageDiv = div }>
                        <div className={ contentClassName }>
                            <svg className="wc-message-callout">
                                <path className="point-left" d="m0,6 l6 6 v-12 z" />
                                <path className="point-right" d="m6,6 l-6 6 v-12 z" />
                            </svg>
                            { this.props.children }
                        </div>
                    </div>
                    <div className={ 'wc-message-from wc-message-from-' + who }>{ timeLine }</div>
                </div>
            );
        }


    }
}

2)Add customized WebChat to website and display it at the bottom right corner of the we page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="BotChat/botchat.css" rel="stylesheet" />
    <script src="BotChat/botchat.js"></script>
    <style>
        #mychat {
            margin: 10px;
            position: fixed;
            bottom: 30px;
            right: 10px;
            z-index: 1000000;
        }

        .botIcon {
            float: left !important;
            border-radius: 50%;
        }

        .userIcon {
            float: right !important;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="container">
        <img id="mychat" src="https://i.stack.imgur.com/jyAmj.png"/>
    </div>
</body>
</html>
<script>
    (function () {
        var div = document.createElement("div");
        document.getElementsByTagName('body')[0].appendChild(div);
        div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
        BotChat.App({
            directLine: { secret: 'bZM43q4rkPU.cwA.PZg.lo4uCEpvbemZfKIETVkbeM79K0eQ96A_zs4U3muXdi0' },
            user: { id: 'You' },
            bot: { id: 'MeBot1' }
        }, document.getElementById("botDiv"));

        document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
        document.querySelector('body').addEventListener('click', function (e) {
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            if (e.target.matches('#chatbotheader')) {
                var botDiv = document.querySelector('#botDiv');

                botDiv.style.height = "0px";

                document.getElementById("mychat").style.display = "block";
            };
        });

        document.getElementById("mychat").addEventListener("click", function (e) {

            document.getElementById("botDiv").style.height = '500px';

            e.target.style.display = "none";
        })
    }());
</script>

Test result: