angular-chat-widget-rasa/bundles/angular-chat-widget-rasa.umd.min.js

A chatbot widget that is able to connect to a rasa chatbot using SocketIO

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/common"),require("@angular/platform-browser/animations"),require("rxjs"),require("@angular/animations"),require("socket.io-client"),require("rxjs/Observable"),require("@angular/core")):"function"==typeof define&&define.amd?define("angular-chat-widget-rasa",["exports","@angular/common","@angular/platform-browser/animations","rxjs","@angular/animations","socket.io-client","rxjs/Observable","@angular/core"],e):e(t["angular-chat-widget-rasa"]={},t.ng.common,t.ng.platformBrowser.animations,t.rxjs,t.ng.animations,t.io,t.rxjs.Observable,t.ng.core)}(this,function(t,e,n,o,a,s,i,r){"use strict";s=s&&s.hasOwnProperty("default")?s["default"]:s;var c=function(){function t(){}return t.decorators=[{type:r.Component,args:[{selector:"chat-avatar",template:'\n    <img [attr.src]="image" class="avatar" />\n  ',styles:["\n    .avatar {\n      height: 30px;\n      width: 30px;\n      border-radius: 50%;\n      float: left;\n      margin-right: 10px;\n    }\n  "]}]}],t.propDecorators={image:[{type:r.Input}]},t}(),p=a.trigger("fadeInOut",[a.transition(":enter",[a.style({opacity:0}),a.animate(250)]),a.transition("* => void",[a.animate(250,a.style({opacity:0}))])]),h=a.trigger("fadeIn",[a.transition(":enter",[a.style({opacity:0}),a.animate(500)]),a.transition(":leave",[a.style({opacity:0}),a.animate(1)])]),d=function(){function t(){var t=this;this.getMessages=function(){return i.Observable.create(function(e){t.socket.on("bot_uttered",function(t){e.next(t)})})}}return t.prototype.connect=function(t){var e=this;this.socket=s(t),this.socket.on("connect",function(){e.socket.emit("session_request",{session_id:e.socket.id})}),this.socket.on("session_confirm",function(t){}),this.socket.on("connect_error",function(t){console.log(t)}),this.socket.on("error",function(t){console.log(t)}),this.socket.on("disconnect",function(t){console.log(t)})},t.prototype.sendMessage=function(t){this.socket.emit("user_uttered",{message:t})},t.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=r.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),u=function(){function t(t){this.theme="blue",this.botName="Bot",this.botAvatar="https://cdn.dribbble.com/users/275794/screenshots/3128598/gbot_800.png",this.userAvatar="https://storage.proboards.com/6172192/images/gKhXFw_5W0SD4nwuMev1.png",this.url="http://localhost:5002",this.startingMessage="Hi, how can we help you?",this.opened=!0,this._visible=!1,this.focus=new o.Subject,this.messages=[],this.chatService=t,this.chatService.connect(this.url)}return Object.defineProperty(t.prototype,"visible",{get:function(){return this._visible},set:function(t){var e=this;this._visible=t,this._visible&&setTimeout(function(){e.scrollToBottom(),e.focusMessage()},0)},enumerable:!0,configurable:!0}),t.prototype.addMessage=function(t,e,n){this.messages.unshift({from:t,text:e,type:n,date:(new Date).getTime()}),this.scrollToBottom()},t.prototype.scrollToBottom=function(){this.bottom!==undefined&&this.bottom.nativeElement.scrollIntoView()},t.prototype.focusMessage=function(){this.focus.next(!0)},t.prototype.ngOnInit=function(){var e=this;this.client={name:"Guest User",status:"online",avatar:this.userAvatar},this.operator={name:this.botName,status:"online",avatar:this.botAvatar},this.opened&&setTimeout(function(){return e.visible=!0},1e3),setTimeout(function(){e.addMessage(e.operator,e.startingMessage,"received")},1500),this.chatService.getMessages().subscribe(function(t){setTimeout(function(){e.addMessage(e.operator,t.text,"received")},1e3)})},t.prototype.toggleChat=function(){this.visible=!this.visible},t.prototype.sendMessage=function(t){var e=t.message;""!==e.trim()&&(this.addMessage(this.client,e,"sent"),this.chatService.sendMessage(e))},t.prototype.handleKeyboardEvent=function(t){"/"===t.key&&this.focusMessage(),"?"!==t.key||this._visible||this.toggleChat()},t.decorators=[{type:r.Component,args:[{selector:"chat-widget",template:'<div class="wrapper {{theme}}">\n  <div class="chat-box" *ngIf="visible" [@fadeInOut]="visible">\n    <div class="chat-box-header">\n      <div class="">\n        <div class="operator-status">\n          {{operator.status}}\n          <span class="operator-status-online">●</span>\n          <button class="chat-button-header" (click)="toggleChat()">✕</button>\n        </div>\n        <chat-avatar [image]="operator.avatar"></chat-avatar>\n        <h3 class="operator-name">\n          {{operator.name}}\n        </h3>\n      </div>\n    </div>\n    <div class="chat-box-main">\n      <div class="chat-message-bottom" #bottom></div>\n      <ng-container *ngFor="let message of messages">\n        <div class="chat-message" [class.chat-message-received]="message.type === \'received\'"\n             [@fadeIn]\n             [class.chat-message-sent]="message.type === \'sent\'">\n          <div >\n            <chat-avatar [image]="message.from.avatar" class="chat-message-from-avatar"></chat-avatar>\n            <div class="chat-message-text">\n              {{message.text}}\n            </div>\n          </div>\n          <div class="chat-message-date">\n            {{message.date | date: \'short\'}}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class="chat-box-footer">\n      <chat-input (send)="sendMessage($event)" (dismiss)="toggleChat()" [focus]="focus"></chat-input>\n    </div>\n  </div>\n  <button class="chat-button" (click)="toggleChat()">\n    <span [@fadeIn] *ngIf="visible">✕</span>\n    <span [@fadeIn] *ngIf="!visible">?</span>\n  </button>\n</div>\n',animations:[p,h],styles:['*{box-sizing:border-box;position:relative;font-family:"Open Sans","Helvetica Neue",sans-serif}.wrapper{position:absolute;top:0;bottom:0;height:100vh;width:100vw}.chat-button{z-index:1;width:60px;height:60px;position:absolute;bottom:20px;right:40px;box-shadow:0 5px 40px rgba(0,0,0,.16);background:#1976d2;border-radius:50%;border:none;outline:0;color:#fff;font-size:32px}.chat-button-header{z-index:1;font-weight:700;color:#fff;border:1px solid #fff;background-color:inherit;padding:5px 9px;margin-left:5px}.chat-button:focus{border:2px solid #fff}.chat-box{z-index:2;position:absolute;left:0;height:100vh;width:100vw;margin:0;display:flex;flex-direction:column;box-shadow:0 5px 40px rgba(0,0,0,.16);background:#1976d2}.chat-box-hidden{display:none}.chat-box-header{padding:10px;color:#fff}.chat-box-main{flex:1;width:100%;background:#f5f5f5;display:flex;flex-direction:column-reverse;overflow:auto}.chat-box-footer{color:#fff;height:50px}.operator-name{margin:0;padding:1px}.operator-status{float:right;padding:4px}.operator-status span{margin-left:4px}.operator-status-online{color:#7cfc00}.operator-status-offline{color:red}.operator-avatar{height:30px;width:30px;border-radius:50%;float:left;margin-right:10px}.chat-message{display:block;width:auto;margin:5px;align-self:flex-start;flex-direction:row;max-width:80%;word-wrap:break-word}.chat-message-date{font-size:11px;color:#8d898d;padding:5px}.chat-message-from-avatar{height:35px;width:35px;border-radius:50%}.chat-message-text{margin-left:10px;padding:10px;border-radius:3px}.chat-message-received{margin-right:50px}.chat-message-received .chat-message-text{background:#b9d6f2;margin-left:50px;border-bottom-left-radius:0}.chat-message-received .chat-message-text:before{position:absolute;content:" ";left:-10px;bottom:0;border-right:10px solid #b9d6f2;border-top:10px solid transparent;z-index:0}.chat-message-received .chat-message-date{margin-left:50px}.chat-message-received .chat-message-from-avatar{position:absolute;left:0;bottom:-15px}.chat-message-sent{align-self:flex-end}.chat-message-sent .chat-message-from{float:right}.chat-message-sent .chat-message-text{background:#84dccf;margin-right:50px;border-bottom-right-radius:0}.chat-message-sent .chat-message-text:after{position:absolute;content:" ";right:-10px;bottom:0;border-left:10px solid #84dccf;border-top:10px solid transparent;z-index:0}.chat-message-sent .chat-message-date{text-align:right;padding-right:50px}.chat-message-sent .chat-message-from-avatar{position:absolute;right:0;bottom:-15px}.blue .chat-box,.blue .chat-button{background:#1976d2}.grey .chat-box,.grey .chat-button{background:#454549}.red .chat-box,.red .chat-button{background:#dd0031}@media (min-width:576px){.wrapper{top:auto;right:0;width:300px}.chat-button{display:block}.chat-button-header{display:none}.chat-box{top:auto;left:auto;bottom:100px;right:40px;height:60vh;width:300px;border-radius:10px}}@media (min-width:768px){.chat-box{height:70vh}}@media (min-width:992px){.chat-box{height:80vh}}']}]}],t.ctorParameters=function(){return[{type:d}]},t.propDecorators={bottom:[{type:r.ViewChild,args:["bottom"]}],theme:[{type:r.Input}],botName:[{type:r.Input}],botAvatar:[{type:r.Input}],userAvatar:[{type:r.Input}],url:[{type:r.Input}],startingMessage:[{type:r.Input}],opened:[{type:r.Input}],visible:[{type:r.Input}],handleKeyboardEvent:[{type:r.HostListener,args:["document:keypress",["$event"]]}]},t}(),l=function(){function t(){this.buttonText="↩︎",this.focus=new r.EventEmitter,this.send=new r.EventEmitter,this.dismiss=new r.EventEmitter}return t.prototype.ngOnInit=function(){var t=this;this.focus.subscribe(function(){return t.focusMessage()})},t.prototype.focusMessage=function(){this.message.nativeElement.focus()},t.prototype.getMessage=function(){return this.message.nativeElement.value},t.prototype.clearMessage=function(){this.message.nativeElement.value=""},t.prototype.onSubmit=function(){var t=this.getMessage();""!==t.trim()&&(this.send.emit({message:t}),this.clearMessage(),this.focusMessage())},t.decorators=[{type:r.Component,args:[{selector:"chat-input",template:'\n    <textarea type="text" class="chat-input-text" placeholder="Type message..."\n              #message (keydown.enter)="onSubmit()" (keyup.enter)="message.value = \'\'" (keyup.escape)="dismiss.emit()"></textarea>\n    <button type="submit" class="chat-input-submit" (click)="onSubmit()">\n      {{buttonText}}\n    </button>\n  ',encapsulation:r.ViewEncapsulation.None,styles:[".chat-input-text{margin:14px 0 0 14px;height:25px;width:70%;border:0;resize:none;border:none;overflow:auto;outline:0;box-shadow:none;font-size:14px;background-color:inherit;color:inherit}.chat-input-text::-webkit-input-placeholder{color:inherit}.chat-input-text::-moz-placeholder{color:inherit}.chat-input-text::-ms-input-placeholder{color:inherit}.chat-input-submit{margin:14px 12px;float:right;background-color:inherit;color:inherit;font-size:24px;border:0;outline:0}"]}]}],t.propDecorators={buttonText:[{type:r.Input}],focus:[{type:r.Input}],send:[{type:r.Output}],dismiss:[{type:r.Output}],message:[{type:r.ViewChild,args:["message"]}]},t}(),g=function(){function t(){this.text="Select theme",this.themeChange=new r.EventEmitter,this.themes=["blue","grey","red"]}return t.prototype.setTheme=function(t){this.theme=t,this.themeChange.emit(this.theme)},t.decorators=[{type:r.Component,args:[{selector:"chat-config",template:'\n    <div class="chat-config">\n      {{text}}\n      <button *ngFor="let item of themes"\n              class="btn" [class.btn-active]="item === theme"\n              (click)="setTheme(item)">\n        {{item}}\n      </button>\n    </div>\n  ',styles:["\n    .chat-config {\n      padding: 20px;\n    }\n    .btn {\n      padding: 5px;\n      margin: 0px 2px;\n      border: 1px solid #dedede;\n      outline: none;\n    }\n    .btn-active {\n      border: 1px solid #a0a0a0;\n    }\n    .btn:focus {\n      border: 1px solid #333;\n    }\n  "]}]}],t.propDecorators={theme:[{type:r.Input}],text:[{type:r.Input}],themeChange:[{type:r.Output}]},t}(),m=function(){function t(){}return t.decorators=[{type:r.NgModule,args:[{imports:[e.CommonModule,n.BrowserAnimationsModule],declarations:[c,u,l,g],exports:[u,g],entryComponents:[u,g],providers:[d]}]}],t}();t.ChatbotRasaModule=m,t.ɵd=h,t.ɵc=p,t.ɵa=c,t.ɵg=g,t.ɵf=l,t.ɵb=u,t.ɵe=d,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=angular-chat-widget-rasa.umd.min.js.map