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

Check https://stackoverflow.com/questions/6668577/using-before-css-pseudo-element-to-add-image-to-modal https://stackoverflow.com/questions/24630006/css-place-image-before-div-using-before https://stackoverflow.com/questions/14695365/css-background-image-in-after-element etc. — Chris Satchell, Jul 26 '18 at 10:45
You should read the documentation about Webchat to see how you can customize it (https://github.com/Microsoft/BotFramework-WebChat/). But you will not get a full response here without providing at least some code showing that you tried to do it — Nicolas R, Jul 27 '18 at 07:51
@NicolasR I understand, but is it possible to achieve those features via CSS only? — Sam, Jul 27 '18 at 08:42
I'm not sure, I'm not qualified enough in front/CSS to ensure that it is possible by CSS only. I have done it in the past by changing a few things on the webchat code — Nicolas R, Jul 27 '18 at 08:44
As NicolasR said, you can achieve your requirement by modifying the webchat code, I posted a reply, you can refer to it. — Fei Han, Jul 27 '18 at 09:12

Fei Han · Accepted Answer · 2018-07-27T09:21:02.883

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:

**You are the best!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.** Thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!! — Sam, Jul 27 '18 at 09:34
I have cloned and built the BotFramework-WebChat from GitHub. other files like botchat.js , botchat.css and History.tsx were generated. can I copy these needed files out from the BotFramework-WebChat folder and include them in my project folder? or every other files must be included? — Sam, Aug 31 '18 at 09:18
After you build customized WebChat, you just need to add `botchat.js` and `botchat.css` in your project and add references to these files on your web page. — Fei Han, Aug 31 '18 at 09:47

Customizing bot framework direct line API with css

1 Answers1

Linked