botui/build/botui.min.js

A JS library to build the UI for your bot

/*
 * botui 0.1.4
 * A JS library to build the UI for your bot
 * https://botui.moin.im
 *
 * Copyright 2017, Moin Uddin (https://moin.im)
 * Released under the MIT license.
*/

!function(e,t){"use strict";"function"==typeof define&&define.amd?define([],function(){return e.BotUI=t(e)}):e.BotUI=t(e)}("undefined"!=typeof window?window:this,function(e,t){"use strict";return function(t,n){function o(e,t,n,o){return"<a class='botui-message-content-link' target='"+(o?"blank":"")+"' href='"+n+"'>"+t+"</a>"}function i(e){return e.replace(l.image,"<img class='botui-message-content-image' src='$2' alt='$1' />").replace(l.icon,"<i class='botui-icon botui-message-content-icon fa fa-$1'></i>").replace(l.link,o)}function s(e,t){var n=document.createElement("script");n.type="text/javascript",n.src=e,t&&(n.onload=t),document.body.appendChild(n)}function r(e){g.action.addMessage&&f.message.human({delay:100,content:e}),g.action.show=!g.action.autoHide}function a(e){if(!e.content)throw Error('BotUI: "content" is required in message object.');e.type=e.type||"text",e.visible=!e.delay;var t=g.messages.push(e)-1;return new Promise(function(n,o){setTimeout(function(){g.messages[t].visible=!0,n(t)},e.delay||0)})}function u(e,t){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}if(n=n||{},!t)throw Error("BotUI: Container id is required as first argument.");if(!document.getElementById(t))throw Error("BotUI: Element with id #"+t+" does not exist.");if(!e.Vue&&!n.vue)throw Error("BotUI: Vue is required but not found.");var c,d,m={debug:!1,fontawesome:!0},f={},l={icon:/!\(([^\)]+)\)/gim,image:/!\[(.*?)\]\((.*?)\)/gim,link:/\[([^\[]+)\]\(([^\)]+)\)(\^?)/gim};e.Vue=e.Vue||n.vue;for(var p in m)n.hasOwnProperty(p)&&(m[p]=n[p]);e.Promise||Promise||options.promise||s("https://cdn.jsdelivr.net/es6-promise/4.1.0/es6-promise.min.js");var h={template:"<div class=\"botui botui-container\"><div class=\"botui-messages-container\"><div v-for=\"msg in messages\"><transition name=\"slide-fade\"><div class=\"botui-message\" v-if=\"msg.visible\" :class=\"msg.cssClass\"><div :class=\"[{human: msg.human, \'botui-message-content\': true}, msg.type]\" v-botui-scroll><span v-if=\"msg.type == \'text\'\" v-text=\"msg.content\" v-botui-markdown></span> <iframe v-if=\"msg.type == \'embed\'\" :src=\"msg.content\" frameborder=\"0\" allowfullscreen></iframe></div></div></transition></div></div><div class=\"botui-actions-container\"><transition name=\"slide-fade\"><div v-if=\"action.show\" v-botui-scroll><form v-if=\"action.type == \'text\'\" class=\"botui-actions-text\" @submit.prevent=\"handle_action_text()\" :class=\"action.cssClass\"> <input type=\"text\" ref=\"input\" :type=\"action.text.sub_type\" v-model=\"action.text.value\" class=\"botui-actions-text-input\" :placeholder=\"action.text.placeholder\" :size=\"action.text.size\" :value=\"action.text.value\" :value=\"action.text.cssClass\" required/> <button v-if=\"isMobile\" class=\"botui-actions-text-submit\">Go</button></form><div v-if=\"action.type == \'button\'\" class=\"botui-actions-buttons\" :class=\"action.cssClass\"> <button type=\"button\" :class=\"button.cssClass\" class=\"botui-actions-buttons-button\" v-for=\"button in action.button.buttons\" @click=\"handle_action_button(button)\" autofocus><i v-if=\"button.icon\" class=\"botui-icon botui-action-button-icon fa\" :class=\"\'fa-\' + button.icon\"></i> {{button.text}}</button></div></div></transition></div></div>",data:function(){return{action:{text:{size:30,placeholder:"Write here .."},button:{},show:!1,type:"text",autoHide:!0,addMessage:!0},messages:[]}},computed:{isMobile:function(){return e.innerWidth&&e.innerWidth<=768}},methods:{handle_action_button:function(e){r(e.text),d({type:"button",text:e.text,value:e.value})},handle_action_text:function(){this.action.text.value&&(r(this.action.text.value),d({type:"text",value:this.action.text.value}),this.action.text.value="")}}};e.Vue.directive("botui-markdown",function(e,t){"false"!=t.value&&(e.innerHTML=i(e.textContent))}),e.Vue.directive("botui-scroll",{inserted:function(e){e.scrollIntoView()}}),c=new e.Vue({components:{"bot-ui":h}}).$mount("#"+t);var g=c.$children[0];f.message={add:function(e){return a(e)},bot:function(e){return e=e||{},a(e)},human:function(e){return e=e||{},e.human=!0,a(e)},get:function(e){return Promise.resolve(g.messages[e])},remove:function(e){return g.messages.splice(e,1),Promise.resolve()},update:function(e,t){return g.messages[e].content=t.content,Promise.resolve(t.content)},removeAll:function(){return g.messages.splice(0,g.messages.length),Promise.resolve()}};var v=function(e){return u({type:"text",cssClass:"",autoHide:!0,addMessage:!0},e),g.action.type=e.type,g.action.cssClass=e.cssClass,g.action.autoHide=e.autoHide,g.action.addMessage=e.addMessage,new Promise(function(t,n){d=t,setTimeout(function(){g.action.show=!0,"text"==e.type&&Vue.nextTick(function(){g.$refs.input.focus()})},e.delay||0)})};return f.action={show:v,hide:function(){return g.action.show=!1,Promise.resolve()},text:function(e){return g.action.text=e,v(e)},button:function(e){if(e.type="button",!e.buttons)throw Error('BotUI: "buttons" property is expected as an array.');return g.action.button.buttons=e.buttons,v(e)}},m.fontawesome&&s("https://use.fontawesome.com/ea731dcb6f.js"),m.debug&&(f._botApp=c),f}});