自定义Botman按钮位置

时间:2019-10-14 13:20:44

标签: javascript laravel chatbot

我正在尝试通过修改App.js来修改按钮和其他占位符的位置,但是我遇到了一个问题。请找到我在代码中所做的小修改。

我还分享了所需输出的屏幕截图。我正在突出显示按钮代码所在的部分。

这是我得到的代码和输出

我尝试将按钮的移到

  • 之外,但是没有用。

    Result of the Code

    module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
    return _c('div', [_c('div', {
    staticClass: "arrow"
    }), _vm._v(" "), _c('ul', {
    staticClass: "ChatLog"
    }, /li 1 STARTS/
    _vm._l((_vm.messages), function(message) {
    return _c('li', {
    staticClass: "ChatLog__entry",
    class: {
    'ChatLog__entry_mine': message.isMine
    }
    }, [_c('img', {
    staticClass: "ChatLog__avatar",
    attrs: {
    "src": "/logo.png"
    }
    }), _vm._v(" "), _c('p', {
    staticClass: "ChatLog__message"
    }, [_vm._v("\n " + _vm._s(message.text) + "\n "), (message.attachment.type === 'image') ? _c('img', {
    staticClass: "ChatLog__message__image",
    attrs: {
    "src": message.attachment.url
    }
    }) : _vm._e(), _vm._v(" "), (message.attachment.type === 'video') ? _c('video', {
    staticClass: "ChatLog__message__image",
    attrs: {
    "controls": "",
    "height": "160",
    "autoplay": ""
    }
    }, [_c('source', {
    attrs: {
    "src": message.attachment.url,
    "type": "video/mp4"
    }
    })]) : _vm._e(), _vm._v(" "), (message.attachment.type === 'audio') ? _c('audio', {
    staticClass: "ChatLog__message__image",
    attrs: {
    "controls": "",
    "autoplay": ""
    }
    }, [_c('source', {
    attrs: {
    "src": message.attachment.url,
    "type": "audio/mp3"
    }
    **})]) : _vm._e()]),
    /BTN starts HERE/
    _vm._v(" ") , (message.original.type === 'actions') ? _c('div', _vm._l((message.original.actions), function(action) {
    return _c('div', {
    staticClass: "btn",
    on: {
    "click": function($event) {
    _vm.performAction(action.value, message.original)
    }
    }
    }, [(action.image_url) ? _c('img', {
    staticStyle: {
    "max-height": "25px"
    },
    attrs: {
    "src": action.image_url
    }
    }) : _vm._e(), _vm._v("\n " + _vm._s(action.text) + "\n ")])
    })) /BTN ends here/
    : _vm._e()])
    /LI ends here /
    })) /UL ENDS HERE/
    
    , _vm._v(" "), _c('input', {
    staticClass: "ChatAttachment",
    attrs: {
    "type": "file",
    "id": "attachment",
    "value": "Attachment"
    }
    }), _vm._v(" "), _c('label', {
    attrs: {
    "for": "attachment"
    }
    }, [_c('svg', {
    attrs: {
    "xmlns": "http://www.w3.org/2000/svg",
    "width": "20",
    "height": "17",
    "viewBox": "0 0 20 17"
    }
    }, [_c('path', {
    attrs: {
    "d": "M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
    }
    })]), _vm._v(" "), _c('span', [_vm._v("Attachment")])]), _vm._v(" "), _c('input', {
    directives: [{
    name: "model",
    rawName: "v-model",
    value: (_vm.newMessage),
    expression: "newMessage"
    }],
    staticClass: "ChatInput",
    attrs: {
    "type": "text",
    "placeholder": "Type Here"
    },
    domProps: {
    "value": (_vm.newMessage)
    },
    on: {
    "keyup": function($event) {
    if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key)) { return null; }
    _vm.sendMessage($event)
    },
    "input": function($event) {
    if ($event.target.composing) { return; }
    _vm.newMessage = $event.target.value
    }
    }
    })])
    },staticRenderFns: []}
    
    // }),
    / 69 /
    //
    

    预期的输出是.ChatMessage类外部的按钮可见

    Desired Output

    我可以使用两种不同的ChatLog_entry来表示按钮的颜色响应吗?

    return $this->ask($question, function (Answer $answer) {
        if ($answer->isInteractiveMessageReply()) {
            if ($answer->getValue() === 'attd') {
                $this->say('Attendance Issue');
                $this->say('Login to UMS. In the main screen click on "Attendance" Tab');
                $this->askNextStep();
            }
    

    “出勤问题”应该采用不同的颜色。感谢您的支持

  • 0 个答案:

    没有答案