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对其进行自定义，以自定义bot。我还需要在漫游器和用户发送的每条消息中添加一个圆形图像图标。请如何使用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>

测试结果：

使用CSS自定义bot框架直接API

1 个答案: