使用 css 自定义 bot 框架直线 API

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>

我希望在用户点击之前我们页面的右下角出现这样的聊天图标

聊天会这样弹出

我用机器人框架构建了一个机器人。我已使用直线 API 将机器人添加到我的网站，它出现在我网站的右上角。我需要使用下载到我的应用程序文件中的 botchat.css 来自定义它以自定义机器人。我还需要为机器人和用户发送的每条消息添加一个圆形图像图标。请问如何使用 botchat.css 文件实现这一点？

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

Answer 1

您似乎想动态展开/折叠您的聊天机器人，并在每条消息中显示机器人图标。为达到您的要求，请参考以下步骤。

1)通过修改History.tsx，构建自定义的WebChat，在每条消息中显示机器人图标。

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)将自定义的WebChat添加到网站并显示在我们页面的右下角。

<!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>

测试结果：