angular-chat-widget-rasa
Version:
A chatbot widget that is able to connect to a rasa chatbot using SocketIO
87 lines • 6.52 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
export class ChatInputComponent {
constructor() {
this.buttonText = '↩︎';
this.focus = new EventEmitter();
this.send = new EventEmitter();
this.dismiss = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
this.focus.subscribe((/**
* @return {?}
*/
() => this.focusMessage()));
}
/**
* @return {?}
*/
focusMessage() {
this.message.nativeElement.focus();
}
/**
* @return {?}
*/
getMessage() {
return this.message.nativeElement.value;
}
/**
* @return {?}
*/
clearMessage() {
this.message.nativeElement.value = '';
}
/**
* @return {?}
*/
onSubmit() {
/** @type {?} */
const message = this.getMessage();
if (message.trim() === '') {
return;
}
this.send.emit({ message });
this.clearMessage();
this.focusMessage();
}
}
ChatInputComponent.decorators = [
{ type: Component, args: [{
selector: 'chat-input',
template: `
<textarea type="text" class="chat-input-text" placeholder="Type message..."
#message (keydown.enter)="onSubmit()" (keyup.enter)="message.value = ''" (keyup.escape)="dismiss.emit()"></textarea>
<button type="submit" class="chat-input-submit" (click)="onSubmit()">
{{buttonText}}
</button>
`,
encapsulation: 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}"]
}] }
];
ChatInputComponent.propDecorators = {
buttonText: [{ type: Input }],
focus: [{ type: Input }],
send: [{ type: Output }],
dismiss: [{ type: Output }],
message: [{ type: ViewChild, args: ['message',] }]
};
if (false) {
/** @type {?} */
ChatInputComponent.prototype.buttonText;
/** @type {?} */
ChatInputComponent.prototype.focus;
/** @type {?} */
ChatInputComponent.prototype.send;
/** @type {?} */
ChatInputComponent.prototype.dismiss;
/** @type {?} */
ChatInputComponent.prototype.message;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9hbmd1bGFyLWNoYXQtd2lkZ2V0LXJhc2EvIiwic291cmNlcyI6WyJsaWIvY2hhdC1pbnB1dC9jaGF0LWlucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFBO0FBY3hILE1BQU0sT0FBTyxrQkFBa0I7SUFaL0I7UUFha0IsZUFBVSxHQUFHLElBQUksQ0FBQTtRQUNqQixVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQTtRQUN6QixTQUFJLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQTtRQUN6QixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQTtJQTZCL0MsQ0FBQzs7OztJQTFCQyxRQUFRO1FBQ04sSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTOzs7UUFBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLEVBQUMsQ0FBQTtJQUNqRCxDQUFDOzs7O0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQTtJQUNwQyxDQUFDOzs7O0lBRU0sVUFBVTtRQUNmLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFBO0lBQ3pDLENBQUM7Ozs7SUFFTSxZQUFZO1FBQ2pCLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUE7SUFDdkMsQ0FBQzs7OztJQUVELFFBQVE7O2NBQ0EsT0FBTyxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUU7UUFDakMsSUFBSSxPQUFPLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFO1lBQ3pCLE9BQU07U0FDUDtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQTtRQUMzQixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUE7UUFDbkIsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFBO0lBQ3JCLENBQUM7OztZQTNDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLFFBQVEsRUFBRTs7Ozs7O0dBTVQ7Z0JBQ0QsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7O2FBRXRDOzs7eUJBRUUsS0FBSztvQkFDTCxLQUFLO21CQUNMLE1BQU07c0JBQ04sTUFBTTtzQkFDTixTQUFTLFNBQUMsU0FBUzs7OztJQUpwQix3Q0FBaUM7O0lBQ2pDLG1DQUEwQzs7SUFDMUMsa0NBQTBDOztJQUMxQyxxQ0FBNkM7O0lBQzdDLHFDQUF5QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdDaGlsZCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjaGF0LWlucHV0JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8dGV4dGFyZWEgdHlwZT1cInRleHRcIiBjbGFzcz1cImNoYXQtaW5wdXQtdGV4dFwiIHBsYWNlaG9sZGVyPVwiVHlwZSBtZXNzYWdlLi4uXCJcbiAgICAgICAgICAgICAgI21lc3NhZ2UgKGtleWRvd24uZW50ZXIpPVwib25TdWJtaXQoKVwiIChrZXl1cC5lbnRlcik9XCJtZXNzYWdlLnZhbHVlID0gJydcIiAoa2V5dXAuZXNjYXBlKT1cImRpc21pc3MuZW1pdCgpXCI+PC90ZXh0YXJlYT5cbiAgICA8YnV0dG9uIHR5cGU9XCJzdWJtaXRcIiBjbGFzcz1cImNoYXQtaW5wdXQtc3VibWl0XCIgKGNsaWNrKT1cIm9uU3VibWl0KClcIj5cbiAgICAgIHt7YnV0dG9uVGV4dH19XG4gICAgPC9idXR0b24+XG4gIGAsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0eWxlVXJsczogWycuL2NoYXQtaW5wdXQuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBDaGF0SW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBwdWJsaWMgYnV0dG9uVGV4dCA9ICfihqnvuI4nXG4gIEBJbnB1dCgpIHB1YmxpYyBmb2N1cyA9IG5ldyBFdmVudEVtaXR0ZXIoKVxuICBAT3V0cHV0KCkgcHVibGljIHNlbmQgPSBuZXcgRXZlbnRFbWl0dGVyKClcbiAgQE91dHB1dCgpIHB1YmxpYyBkaXNtaXNzID0gbmV3IEV2ZW50RW1pdHRlcigpXG4gIEBWaWV3Q2hpbGQoJ21lc3NhZ2UnKSBtZXNzYWdlOiBFbGVtZW50UmVmXG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5mb2N1cy5zdWJzY3JpYmUoKCkgPT4gdGhpcy5mb2N1c01lc3NhZ2UoKSlcbiAgfVxuXG4gIHB1YmxpYyBmb2N1c01lc3NhZ2UoKSB7XG4gICAgdGhpcy5tZXNzYWdlLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKVxuICB9XG5cbiAgcHVibGljIGdldE1lc3NhZ2UoKSB7XG4gICAgcmV0dXJuIHRoaXMubWVzc2FnZS5uYXRpdmVFbGVtZW50LnZhbHVlXG4gIH1cblxuICBwdWJsaWMgY2xlYXJNZXNzYWdlKCkge1xuICAgIHRoaXMubWVzc2FnZS5uYXRpdmVFbGVtZW50LnZhbHVlID0gJydcbiAgfVxuXG4gIG9uU3VibWl0KCkge1xuICAgIGNvbnN0IG1lc3NhZ2UgPSB0aGlzLmdldE1lc3NhZ2UoKVxuICAgIGlmIChtZXNzYWdlLnRyaW0oKSA9PT0gJycpIHtcbiAgICAgIHJldHVyblxuICAgIH1cbiAgICB0aGlzLnNlbmQuZW1pdCh7IG1lc3NhZ2UgfSlcbiAgICB0aGlzLmNsZWFyTWVzc2FnZSgpXG4gICAgdGhpcy5mb2N1c01lc3NhZ2UoKVxuICB9XG5cbn1cbiJdfQ==