angular-chat-widget-rasa/angular-chat-widget-rasa.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"ChatbotRasaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":12},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":10,"character":26}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵg"}],"entryComponents":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵg"}],"providers":[{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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  "]}]}],"members":{"image":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"chat-widget","animations":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}],"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","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}}"]}]}],"members":{"bottom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":14,"character":3},"arguments":["bottom"]}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"botName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"botAvatar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"userAvatar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"startingMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"addMessage":[{"__symbolic":"method"}],"scrollToBottom":[{"__symbolic":"method"}],"focusMessage":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"toggleChat":[{"__symbolic":"method"}],"sendMessage":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":111,"character":3},"arguments":["document:keypress",["$event"]]}]}]}},"ɵc":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":2,"character":25},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":3,"character":2},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":4,"character":4},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":5,"character":4},"arguments":[250]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":7,"character":2},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":8,"character":4},"arguments":[250,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":8,"character":17},"arguments":[{"opacity":0}]}]}]]}]]},"ɵd":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":14,"character":22},"arguments":["fadeIn",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":15,"character":2},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":16,"character":4},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":17,"character":4},"arguments":[500]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":19,"character":2},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":20,"character":4},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":21,"character":4},"arguments":[1]}]]}]]},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"connect":[{"__symbolic":"method"}],"sendMessage":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":11,"character":17},"member":"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}"]}]}],"members":{"buttonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"send":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"dismiss":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"message":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["message"]}]}],"ngOnInit":[{"__symbolic":"method"}],"focusMessage":[{"__symbolic":"method"}],"getMessage":[{"__symbolic":"method"}],"clearMessage":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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  "]}]}],"members":{"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"themeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"setTheme":[{"__symbolic":"method"}]}}},"origins":{"ChatbotRasaModule":"./lib/chatbot-rasa.module","ɵa":"./lib/chat-avatar/chat-avatar.component","ɵb":"./lib/chat-widget/chat-widget.component","ɵc":"./lib/animations","ɵd":"./lib/animations","ɵe":"./lib/chatbot-rasa.service","ɵf":"./lib/chat-input/chat-input.component","ɵg":"./lib/chat-config/chat-config.component"},"importAs":"angular-chat-widget-rasa"}